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

146

27 июля 2019, 06:50

Первый экран должен быть 100vh (в нем шапка + меню + первая секция)

Как сделать чтобы блок (first-screen) занимал всю оставшуюся высоту, если высота шапки и меню неизвестна ???

Необходимо использовать flex-box. И у того, что должен занять оставшееся место flex-grow: 10 [например].

.parent { 
  height: 100vh; 
}

<div class="parent"> 
  <div class="top-line"></div> 
  <div class="menu"></div> 
  <div class="first-screen"></div> 
</div>

Необходимо использовать flex-box. И у того, что должен занять оставшееся место flex-grow: 10 [например].

Answer 1

Всё просто) Ваш блок parrent будет флекс контейнером и внутри него можно будет использовать правила разметки по флексбоксам. Как вы и написали, вам поможет свойство flex-grow: 1; для блока, который должен занимать свободное пространство внутри флекс контейнера parrent.

Обратите внимание, что флекс контейнеру указано направление flex-direction: column;

.parent { 
  height: 100vh; 
  display: flex; 
  flex-direction: column; 
  justify-content: flex-start 
  align-items: stretch; 
} 
 
.first-screen { 
  flex-grow: 1;  
} 
 
/*Ниже декоративные стили*/ 
 
body { 
  margin: 0; 
  font-size: 18px; 
} 
 
* { 
  box-sizing: border-box; 
} 
 
div { 
  padding: 10px 15px; 
  text-align: center; 
} 
 
.top-line { 
  background-color: crimson; 
} 
 
.menu { 
  background-color: cornflowerblue; 
} 
 
.first-screen { 
  background-color: lightgreen; 
}

<div class="parent"> 
  <div class="top-line">Шапка неизвестной высоты</div> 
  <div class="menu">Менюха неизвестной высоты</div> 
  <div class="first-screen">Этот блок будет занимать оставшееся место на первом экране</div> 
</div>