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

Question

[Dezosick]

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

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

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

.parent {
  height: 100vh;
}

Answer 1

[Арсений Матыцин]

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

Comments

[Dezosick]

Спасибо огромное, помогло!!!

[Арсений Матыцин]

Dezosick, не за что

[Alex ALex]

Арсений Матыцин, У меня такая же проблема смотрите есть блок общий и в нем блок меню и контент, я сделал меню фиксированным а контент прячется под меню тут как использовать флекс бокс?

[Арсений Матыцин]

Alex ALex, у меня воображение, конечно, хорошее, но с примером было бы круче.

[Alex ALex]

Арсений Матыцин, Вот тут посмотрите пожалуйста я не смог фиксированным сделать меню((
https://codepen.io/P-RO-ME-TEY/pen/Kboorj

[Арсений Матыцин]

Alex ALex, у тебя неправильный подход к флексам в данном примере. И к вопросу выше он не имеет отношения.
Для того, чтобы в такой простой схеме все было норм, необходимо исключить либо флексы, либо абсолютное позиционирование. Так как:
1. Флексы на примере выше предполагают взаимоотношения элементов в рамках области. Т.е. если ты сделаешь, как я описывал в примере выше, то нет смысла задавать абсолютное позиционирование шапке в принципе, надо будет только дать возможность автоматической прокрутке контенту. Вариант работоспособный и из области админ-панелей, но, с моего опыта, конечно, ху... плохой вариант.
2. Если оставить абсолютное позиционирование, его, кстати, можно заменить на прилипуху (sticky), то надо исключить в твое схеме флексбоксы. Так как правила упорядочивания элементов должны быть, скажем, обычные, а не флексовые.

[Alex ALex]

Арсений Матыцин, Смотрите я хочу использовать флекс бокс я уберу абсолютное позиционирование а как тогда мне сделать меню фиксированной? может покажите пожалуйста)

[Alex ALex]

Арсений Матыцин, Я убрал все позиционирование и у меня каша образовалась(

[Alex ALex]

Арсений Матыцин, Чисто ваше мнения что мне делать я хочу сделать свой сайт на флексах и менюшку фиксированной как сделать что делать?\
Или есть другой хорошый способ можешь мне посоветовать я прочту и сделаю все..

[Арсений Матыцин]

Alex ALex, ко мне в вк постучись для начала, тут уже слишком много оффтопа