1

Есть родительский блок .products, в котором расположено 3 блока .item. Как сделать высоту .item равной высоте .products, чтобы каждый .item был одинаковой высоты. А затем сделать .description одинаковой высоты через height: calc(100% - 228px);

введите сюда описание изображения

HTML:

<div class="products">

    <div class="item">
        <div class="icon"></div>
        <div class="title">Книги</div>
        <div class="description">
           <p></p>
        </div>
    </div>

    <div class="item">
        <div class="icon"></div>
        <div class="title">Вебинары</div>
        <div class="description">
           <p></p>
        </div>
    </div>

    <div class="item">
        <div class="icon"></div>
        <div class="title">Курсы</div>
        <div class="description">
           <p></p>
        </div>
    </div>

    <div class="clear"></div>
</div>

CSS:

header .item {
    float: left;
    width: calc((100% - 40px)/3);
}

header .item:nth-child(2) {
    margin: 0 20px; 
}

header .item .icon {
    margin: 0 0 15px 0;
    height: 163px;  
}

header .item:nth-child(1) .icon {
    background: url(../images/header__product1_icon.png) center no-repeat;  
}

header .item:nth-child(2) .icon {
    background: url(../images/header__product2_icon.png) center no-repeat;  
}

header .item:nth-child(3) .icon {
    background: url(../images/header__product3_icon.png) center no-repeat;  
}

header .item .title {
    height: 50px;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    background: -webkit-linear-gradient(to right, #af5bfc, #859afa);
    background: -moz-linear-gradient(to right, #af5bfc, #859afa);
    background: -ms-linear-gradient(to right, #af5bfc, #859afa);
    background: -o-linear-gradient(to right, #af5bfc, #859afa);
    background: linear-gradient(to right, #af5bfc, #859afa);
    font-weight: 700;
    font-size: 23px;
    line-height: 50px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
}

header .item .description {
    padding: 20px;
    background: #fff;
}

header .item .description p {
    padding: 0 0 6px 0;
    font-size: 13px;
    line-height: 17px;
    color: #510f8d;
}

header .item .description p:last-child {
    padding: 0; 
}
4
  • оффтоп: прописывать вендорные префиксы вручную в 2016 году — дурной тон. Используйте Autoprefixer — и себе жизнь облегчите, и сообществу будет проще помогать Вам. 23 апр 2016 в 17:16
  • 1
    @KolesnichenkoDS что за бред? Какой дурной тон? Если хочет, пусть хоть все руками в блокноте пишет. 23 апр 2016 в 17:30
  • @АлексейШиманский это про что угодно можно сказать. "Пусть ставит !important где попало, пусть инлайнит все стили в HTML файл, пусть пишет всё в одну строку, если хочет". Но если человек выкладывает код на StackOverflow, то в его же интересах сделать его понятнее и красивее. Не говорю уже о работе в команде, опенсорсе и т. д. 23 апр 2016 в 17:38
  • @KolesnichenkoDS, тут как бы новички обычно, да и профи могут проставить сами (старая школа, привычки). Хотя да, когда я узнал и начал пользоваться этой штукой, жизнь пошла в гору :)
    – user207618
    24 апр 2016 в 8:39

1 ответ 1

2

Для того, что бы блок занял всю высоту родителя необходимо задать height: 100%, в данном случае родитель .wrap - body, отсюда вывод body необходимо задать минимальную высоту в 100%, но он то наследует от html, соответственно и ему так же.
Так вы хотели сделать?

/* задаем высоту на всю страницу для body и html */
html,
body {
  min-height: 100%;
  height: 100%;
}
.wrap {
  height: 100%; /*наследуем ее у родителя*/
  outline: 1px solid red;
  padding: 1%;
  font-size: 0; /*сбрасываем размер шрифта (пригодиться позже)*/ 
}
.item {
  width: 30%;
  height: 100%;/*наследуем высоту*/
  display: inline-block;/* для этой строчки мы сбрасывали шрифт выше, иначе между блоками остались бы текстовые отступы, но не забываем установить размер шрифта в тех блоках,где будет текст, иначе вы просто его не увидите.*/
  /* P.S. можно было - бы воспользоваться свойством `float`*/
  outline: 1px solid blue;
  margin-left: 0.7%;
  padding: 1% 1% 0;
}
.description {
  height: calc(100% - 27%); /*собственно поучаем нужную высоту блоков*/
  outline: 1px solid green;
}
<div class="wrap">
  <div class="item">
    <div class="description"></div>
  </div>
  <div class="item">
    <div class="description"></div>
  </div>
  <div class="item">
    <div class="description"></div>
  </div>
</div>

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.