There is a parent .products block, in which there are 3 .item blocks. How to make the height .item equal to the height .products so that each .item same height. And then make a .description same height through height: calc(100% - 228px);

enter image description here

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; }
  • offtopic : prescribe vendor prefixes manually in 2016 - bad form. Use Autoprefixer and make your life easier, and it will be easier for the community to help you. - Daniel Kolesnichenko
  • one
    @KolesnichenkoDS what nonsense? What a bad taste? If he wants, even if he writes everything in his notebook. - Alexey Shimansky
  • @ Alexey Shimansky is about anything you can say. "Let him put it !important somewhere, let him inline all the styles in the HTML file, let him write everything on one line if he wants." But if a person puts the code on StackOverflow, it is in his best interest to make it clearer and more beautiful. Not to mention teamwork, open source, etc. - Daniel Kolesnichenko
  • @KolesnichenkoDS, here, as it were, beginners usually, and pros can put down themselves (old school, habits). Although yes, when I found out and started using this thing, life went uphill :) - user207618

1 answer 1

In order for the block to occupy the entire height of the parent, you must specify height: 100% , in this case the parent .wrap is the body , from here the body output must be set to the minimum height of 100%, but it inherits from html , respectively, as well.
So you wanted to do?

 /* задаем высоту на всю страницу для 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;/* для этой строчки мы сбрасывали шрифт выше, иначе между блоками остались бы текстовые отступы, но не забываем установить размер шрифта в тех блоках,где будет текст, иначе вы просто его не увидите.*/ /* PS можно было - бы воспользоваться свойством `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>