Як створити вертикальний розділ, який заповнює весь екран? - css

У мене чотири DIV:

• Перший div має фіксовану висоту і розташований зверху (заголовок).

• Другий div також має фіксовану висоту і розташований нижче першого div.

• Четвертий div має фіксовану висоту, розташовану на дні.

• Третій div має змінну висоту: вона розшириться, щоб зробити загалом чотири диви повні до вертикального простору в браузері, якщо вміст менше. Але він буде слідувати висоті змісту, якщо висота вмісту більша за цю. Тому в усі часи я хочу, щоб перший div (заголовок) був у верхній частині сторінки, а четвертий div (нижній колонтитул) - у нижній частині сторінки. Я не можу знати, наскільки високим буде вміст.

  заголовка заголовка заголовка заголовка

файл CSS:

#container { width:800px; height:*; }
#header    { height:200px; }
#menu      { height:50px; }
#content   { height:*; }
#footer    { height:150px; }

я можу це зробити? як правильний спосіб зробити це? Я відчуваю, що це повинно бути не надто важко, але я не можу знайти відповідні відповіді.

Відповіді:

Що ви можете зробити це щось на зразок цього:

#content { height: 100vh; /*100% of viewport height*/
margin-top: 250px;
margin-bottom: 150px; }

Таким чином, це завжди буде 100% від загальної висоти екрана.

Добре, що вийшло виглядати здорово,

HTML

<div class="header">Header !</div>
<div class="menu">Menu !</div>
<div class="content">Content !</div>
<div class="footer">Footer !</div>

CSS

body       { margin: 0; }
.header    { width: 100%; height: 200px; position: fixed; top: 0;        }
.menu      { width: 100%; height: 50px;  position: fixed; top: 200px;    }
.footer    { width: 100%; height: 150px; position: fixed; bottom: 0;     }
.content   { width: 100%; position: fixed; top: 250px; bottom: 150px;
overflow: auto;                                             }