The first screen should be 100vh (it has a cap + menu + first section)

How to make the block (first-screen) occupy the remaining height, if the height of the header and the menu is unknown ???

It is necessary to use flex-box. And that which should take the remaining space flex-grow: 10 [for example].

.parent { height: 100vh; } 
 <div class="parent"> <div class="top-line"></div> <div class="menu"></div> <div class="first-screen"></div> </div>

It is necessary to use flex-box. And that which should take the remaining space flex-grow: 10 [for example].

    1 answer 1

    It's simple) Your parrent block will be a flex container and inside it you can use flexbox markup rules. As you wrote, the flex-grow: 1; property will help you flex-grow: 1; for a block that should occupy free space inside the parrent flex container.

    Notice that the flex container is in the 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>