0

Первый экран должен быть 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 [например].

1 ответ 1

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>

Ваш ответ

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

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