Как растянуть блок на всю высоту родителя?

135
19 марта 2019, 17:40

У меня есть три блока с шириной 30% которые стоят в ряд при помощи:

display: flex;
justify-content: space-between;

Выглядит это так ( JSFiddle: https://jsfiddle.net/YuriiSpace/u96L4x01/ ):

Каждый блок имеет по три дочерних блока:

<div class="box-header"> This is static HEADER </div>
<div class="box-main"> This is main content with dynamic char... </div>
<div class="box-footer"> This is static FOOTER </div>

header и footer имеют указанную высоту, а блок main изменяет высоту в зависимости от контента.

Как сделать так, чтобы высота блокa main занимала остальное все доступное место в блоке и footer на всех блоках был внизу (не учитывая сколько контента в блоке main )

Этот пример на JSFiddle: https://jsfiddle.net/YuriiSpace/u96L4x01/

Желательно чтобы решение было кроссбраузерно.

Answer 1

.container { 
  width: 1024px; 
  height: auto; 
  margin: 0 auto; 
  display: flex; 
  justify-content: space-around; 
} 
 
.box-container { 
  width: 30%; 
  height: auto; 
  border: 2px solid gray; 
  display: flex;/* Раз */ 
  flex-direction: column;/*Два*/ 
} 
 
.box-header { 
  width: 100%; 
  height: 30px; 
  display: flex; 
  justify-content: space-around; 
  align-items: center; 
  font-size: 22px; 
  border-bottom: 1px solid lightgray; 
  background: rgb(230, 255, 230); 
} 
 
.box-main { 
  padding: 10px; 
  flex: 1 0 auto;/*Три*/ 
  background: rgb(255, 255, 230); 
} 
 
.box-footer { 
  width: 100%; 
  height: 30px; 
  display: flex; 
  justify-content: space-around; 
  align-items: center; 
  font-size: 22px; 
  border-top: 1px solid lightgray; 
  background: rgb(230, 247, 255); 
}
<div class="container"> 
 
  <div class="box-container"> 
    <div class="box-header">This is static HEADER</div> 
    <div class="box-main"><b>This is main content with dynamic char. </b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem aliquid autem alias iste error quasi porro vitae. 
    </div> 
    <div class="box-footer">This is static FOOTER</div> 
  </div> 
 
  <div class="box-container"> 
    <div class="box-header">This is static HEADER</div> 
    <div class="box-main"><b>This is main content with dynamic char. </b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius saepe ratione, expedita commodi, explicabo harum laborum quos quam dolorem fugit perferendis rerum magni ducimus itaque quis officia tenetur 
      cum. Doloremque magni ad illo libero minima maiores cumque, eius expedita quibusdam vero, ea dolore aliquid fuga porro sapiente explicabo molestiae. Et? 
    </div> 
    <div class="box-footer">This is static FOOTER</div> 
  </div> 
 
  <div class="box-container"> 
    <div class="box-header">This is static HEADER</div> 
    <div class="box-main"><b>This is main content with dynamic char. </b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta veritatis vel, perspiciatis sequi dolores dicta debitis, earum dolore placeat repudiandae illo aspernatur eum illum provident culpa iusto 
      ducimus maxime odit. 
    </div> 
    <div class="box-footer">This is static FOOTER</div> 
  </div> 
 
</div>

READ ALSO
Как сделать чтобы текст уходил за границу div слева

Как сделать чтобы текст уходил за границу div слева

Обычное поведение текста, если он больше чем размер ограничивающего div и добавлены свойства white-space: nowrap; overflow: hidden; - текст выходит за границу...

149
Screenshot with JavaScript

Screenshot with JavaScript

У меня на сайте есть карта от 2гисИ нужно сделать скрин этого блока с картой на js, решил использовать библиотеку html2canvas и когда скрипт это делает...

141
default wordpress подход к решению critical css

default wordpress подход к решению critical css

Если есть ссылка на конкретную реализацию, буду признателенВообще меня интересует какие подходы есть к этому вопросу, чтобы контент на странице...

150