Question 305180 in Html Question posted in
Some basic documentation can be found here.

Html – how to set the height of a list of cards to 100%?

I have a list of grid cards, but I can’t set their height, help me please

It doesn’t work to set the height of the list of cards, although I also set the height of the parent element

    <div class="desc-grid__body cards-grid">
      <ul class="cards-grid__list">
        <li class="cards-grid__item">
          <div class="cards-grid__short-card short-card">
            <p class="short-card__content">
              <span class="short-card__lable">Более</span>
              <span class="short-card__title">16 лет</span>
              <span class="short-card__desc">экспертизы</span>
            </p>
          </div>
        </li>
        <li class="cards-grid__item">
          <div class="cards-grid__short-card short-card">
            <p class="short-card__content">
              <span class="short-card__lable">Более</span>
              <span class="short-card__title">10 000</span>
              <span class="short-card__desc">заявок ежедневно
              </span>
            </p>
          </div>
        </li>
        <li class="cards-grid__item ">
          <div class="cards-grid__short-card short-card">
            <p class="short-card__content">
              <span class="short-card__lable">Более</span>
              <span class="short-card__title">1 000</span>
              <span class="short-card__desc">Компетентных специалистов</span>
            </p>
          </div>
        </li>
        <li class="cards-grid__item">
          <div class="cards-grid__short-card short-card">
            <p class="short-card__content">
              <span class="short-card__lable">Более</span>
              <span class="short-card__title">24 / 7 / 365</span>
              <span class="short-card__desc">управления сервисными работами</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
Tags:

2

Answers


  1. 0

    Have you tried to give height to the .cards-grid__item?

    It works simply adding .cards-grid__item { height: 100px; background:red;}

    .cards-grid__item { height: 100px; background:red;}
     <div class="desc-grid__body cards-grid">
      <ul class="cards-grid__list">
        <li class="cards-grid__item">
          <div class="cards-grid__short-card short-card">
            <p class="short-card__content">
              <span class="short-card__lable">Более</span>
              <span class="short-card__title">16 лет</span>
              <span class="short-card__desc">экспертизы</span>
            </p>
          </div>
        </li>
        <li class="cards-grid__item">
          <div class="cards-grid__short-card short-card">
            <p class="short-card__content">
              <span class="short-card__lable">Более</span>
              <span class="short-card__title">10 000</span>
              <span class="short-card__desc">заявок ежедневно
              </span>
            </p>
          </div>
        </li>
        <li class="cards-grid__item ">
          <div class="cards-grid__short-card short-card">
            <p class="short-card__content">
              <span class="short-card__lable">Более</span>
              <span class="short-card__title">1 000</span>
              <span class="short-card__desc">Компетентных специалистов</span>
            </p>
          </div>
        </li>
        <li class="cards-grid__item">
          <div class="cards-grid__short-card short-card">
            <p class="short-card__content">
              <span class="short-card__lable">Более</span>
              <span class="short-card__title">24 / 7 / 365</span>
              <span class="short-card__desc">управления сервисными работами</span>
            </p>
          </div>
        </li>
      </ul>
    </div>

    Hope you got the something you want..

    Thanks…

    Login or Signup to reply.
  2. 0

    You can set height in "li" tag, Also as per your code you can set in .cards-grid__list class.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search