Змусьте діва заповнити висоту залишку екрану

Я працюю над веб-додатком, де хочу, щоб вміст заповнив висоту всього екрана.

На сторінці є заголовок, який містить логотип, та інформацію облікового запису. Це може бути довільна висота. Я хочу, щоб розділовий вміст заповнив решту сторінки донизу.

У мене є заголовок divі вміст div. Наразі я використовую таблицю для такого макета:

CSS та HTML

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}

<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

Вся висота сторінки заповнена, і прокручування не потрібно.

Якщо все, що знаходиться в розділі вмісту, налаштування top: 0;помістить його прямо під заголовком. Іноді вміст буде справжньою таблицею, його висота встановлена ​​на 100%. Поміщення headerвсередину contentне дозволить цьому працювати.

Чи є спосіб досягти такого ж ефекту без використання table?

Оновлення:

Елементи всередині вмісту divтакож матимуть висоту, встановлену у відсотках. Тож щось на 100% всередині divзаповіту заповнить його донизу. Як і два елементи на 50%.

Оновлення 2:

Наприклад, якщо заголовок займає 20% висоти екрана, таблиця, вказана на 50% всередині #content, займає 40% площі екрана. Поки що загортання всієї речі в стіл - це єдине, що працює.

Оновлення 2015 року: підхід flexbox

Є дві інші відповіді, які коротко згадують про флексбокс ; однак це було більше двох років тому, і вони не наводять жодного прикладу. Специфікація для flexbox вже точно встановлена.

Примітка. Хоча специфікація макета гнучких ящиків CSS знаходиться на етапі рекомендації щодо кандидата, але не всі браузери її реалізували. Впровадження WebKit має бути префіксом із -webkit-; Internet Explorer реалізує стару версію специфікації з префіксом -ms-; Opera 12.10 реалізує останню версію специфікації, нефіксовану. Перегляньте таблицю сумісності для кожного ресурсу, щоб дізнатися про сучасний стан сумісності.

(взято з https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/F prilagod_boxes )

Усі основні браузери та IE11 + підтримують Flexbox. Для IE 10 або старіших можна використовувати прокладку FlexieJS.

Щоб перевірити поточну підтримку, ви також можете переглянути тут: http://caniuse.com/#feat=flexbox

Робочий приклад

За допомогою flexbox ви можете легко перемикатися між будь-якими вашими рядками чи стовпцями або з фіксованими розмірами, розмірами розміру вмісту або розмірами, що залишилися. У моєму прикладі я встановив заголовок для оснащення його вмісту (відповідно до питання про ОП), я додав колонтитул, щоб показати, як додати область фіксованої висоти, а потім встановив область вмісту, щоб заповнити залишок місця.

html,
body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

У CSS, наведеному вище, властивість flex скорочує властивості flex-зростати , flex-shrink та flex- base, щоб встановити гнучкість елементів flex. Mozilla добре знайомиться з моделлю гнучких коробок .

У CSS насправді не існує надійного крос-браузерного способу зробити це. Припускаючи, що ваш макет має складності, вам потрібно використовувати JavaScript, щоб встановити висоту елемента. Суть того, що вам потрібно зробити:

Element Height = Viewport height - element.offset.top - desired bottom margin

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

Крім того, якщо припустити, що ваш вміст може бути більшим, ніж вікно перегляду, вам потрібно встановити переливання-у для прокрутки.

Оригінальна публікація більше 3 років тому. Я думаю, що багато людей, які приходять на цю посаду, як я, шукають рішення, подібне до додатків, наприклад, зафіксований заголовок, колонтитул та вміст у повний зріст, який займає інший екран. Якщо так, ця публікація може допомогти, вона працює на IE7 + тощо.

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

Ось кілька фрагментів з цієї публікації:

@media screen { 
  
  /* start of screen rules. */ 
  
  /* Generic pane rules */
  body { margin: 0 }
  .row, .col { overflow: hidden; position: absolute; }
  .row { left: 0; right: 0; }
  .col { top: 0; bottom: 0; }
  .scroll-x { overflow-x: auto; }
  .scroll-y { overflow-y: auto; }

  .header.row { height: 75px; top: 0; }
  .body.row { top: 75px; bottom: 50px; }
  .footer.row { height: 50px; bottom: 0; }
  
  /* end of screen rules. */ 
}

<div class="header row" style="background:yellow;">
    <h2>My header</h2>
</div> 
<div class="body row scroll-y" style="background:lightblue;">
    <p>The body</p>
</div> 
<div class="footer row" style="background:#e9e9e9;">
    My footer
</div>

Замість використання таблиць у розмітці можна використовувати таблиці CSS.

Розмітка

<body>    
    <div>hello </div>
    <div>there</div>
</body>

(Відповідне) CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1 і FIDDLE2

Деякі переваги цього методу:

1) Менше розмітки

2) Розмітка є більш семантичною, ніж таблиці, оскільки це не табличні дані.

3) Підтримка браузера дуже хороша : IE8 +, усі сучасні браузери та мобільні пристрої ( каніуса )

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption } 

CSS-підхід (якщо висота відома / фіксована)

Якщо ви хочете, щоб середній елемент переходив вертикально по всій сторінці, ви можете використовувати його calc() що вводиться в CSS3.

Припускаючи, що у нас є фіксована висота header та footerелементи, і ми хочемо, щоб sectionтег зайняв всю наявну вертикальну висоту ...

Демо

Передбачається розмітка і повинен бути ваш CSS

html,
body {
  height: 100%;
}

header {
  height: 100px;
  background: grey;
}

section {
  height: calc(100% - (100px + 150px));
  /* Adding 100px of header and 150px of footer */
  background: tomato;
}

footer {
  height: 150px;
  background-color: blue;
}

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

Тому ось, що я роблю, це додавання висоти елементів і ніж вирахування з 100%використанняcalc() функції.

Просто переконайтеся, що ви використовуєте height: 100%;для батьківських елементів.

Використовується: height: calc(100vh - 110px);

код:

  
.header { height: 60px; top: 0; background-color: green}
.body {
    height: calc(100vh - 110px); /*50+60*/
    background-color: gray;
}
.footer { height: 50px; bottom: 0; }
  

<div class="header">
    <h2>My header</h2>
</div> 
<div class="body">
    <p>The body</p>
</div> 
<div class="footer">
    My footer
</div>

Просте рішення, використовуючи флексбокс:

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}

<body>
  <div>header</div>
  <div class="content"></div>
</body>

Зразок Codepen

Альтернативне рішення, з розділеним центром у розділі вмісту

Як щодо того, ви просто використовуєте те, vhщо означає view heightу CSS ...

Подивіться фрагмент коду, який я створив для вас нижче, і запустіть його:

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}

<div class="full-height">
</div>

Також подивіться на зображення, нижче якого я створив для вас:

CSS3 Простий спосіб

height: calc(100% - 10px); // 10px is height of your first div...

всі основні браузери в наші дні підтримують його, тому продовжуйте, якщо у вас немає вимоги підтримувати старовинні браузери.

Це можна зробити суто за CSSдопомогою vh:

#page {
    display:block; 
    width:100%; 
    height:95vh !important; 
    overflow:hidden;
}

#tdcontent {
    float:left; 
    width:100%; 
    display:block;
}

#content {      
    float:left; 
    width:100%; 
    height:100%; 
    display:block; 
    overflow:scroll;
}

і HTML

<div id="page">

   <div id="tdcontent"></div>
   <div id="content"></div>

</div>

Я перевірив, він працює у всіх основних браузерах: Chrome, IEіFireFox

Жодне з розміщених рішень не працює, коли вам потрібен нижній розділ для прокрутки, коли вміст занадто високий. Ось рішення, яке працює в цьому випадку:

.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

.container {
  width: 400px;
  height: 300px;
}

.header {
  background: cyan;
}

.body {
  background: yellow;
  height: 100%;
}

.body-content-outer-wrapper {
  height: 100%;
}

.body-content-inner-wrapper {
  height: 100%;
  position: relative;
  overflow: auto;
}

.body-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<div class="table container">
  <div class="table-row header">
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
  </div>
  <div class="table-row body">
    <div class="table-cell body-content-outer-wrapper">
      <div class="body-content-inner-wrapper">
        <div class="body-content">
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
        </div>
      </div>
    </div>
  </div>
</div>

Оригінальне джерело: Заповнення залишкової висоти контейнера під час обробки переповнення у CSS

Попередній перегляд JSFiddle

Я також шукав відповідь на це. Якщо вам пощастило мати можливість націлити на IE8 і вище, ви можете використовувати display:tableвідповідні значення, щоб отримати правила візуалізації таблиць з елементами рівня блоку, включаючи div.

Якщо вам навіть пощастило, а ваші користувачі користуються браузерами верхнього рівня (наприклад, якщо це інтранет-додаток на комп'ютерах, якими ви керуєте, як, наприклад, мій останній проект), ви можете використовувати новий гнучкий макет Box в CSS3!

Те, що працювало для мене (з дівом в іншому діві, і я припускаю, що в усіх інших обставинах), - це встановити нижню частину накладки на 100%. Тобто додайте це до таблиці css / styles:

padding-bottom: 100%;

Відмова: Прийнята відповідь дає ідею рішення, але я вважаю його трохи роздутим непотрібними правилами обгортки та css. Нижче наводиться рішення з дуже маленькими правилами css.

HTML 5

<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

Наведене вище рішення використовує оглядові одиниці та флексбокс , і тому є IE10 +, забезпечуючи використання старого синтаксису для IE10.

Codepen to play with: посилання на codepen

Або цей, для тих, хто потребує прокручування основного контейнера у разі переповнення вмісту: посилання на codepen

Зараз є багато відповідей, але я знайшов використання height: 100vh; що працював над елементом div, який повинен заповнити весь наявний вертикальний простір.

Таким чином, мені не потрібно грати з дисплеєм чи позиціонуванням. Це було корисно при використанні Bootstrap для виготовлення панелі приладів, на якій я мав бічну панель і основну. Я хотів, щоб головне розтягнулося і заповнило весь вертикальний простір, щоб я міг застосувати колір фону.

div {
    height: 100vh;
}

Підтримує IE9 і вище: натисніть, щоб переглянути посилання

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
    height: 100%;
    margin: 0;
    padding: 0;
    color: #FFF;
}

#header
{
    float: left;
    width: 100%;
    background: red;
}

#content
{
    height: 100%;
    overflow: auto;
    background: blue;
}

</style>
</head>
<body>

    <div id="content">
        <div id="header">
                Header
                <p>Header stuff</p>
        </div>
            Content
            <p>Content stuff</p>
    </div>

</body>
</html>

У всіх розумних браузерах ви можете поставити розділ "заголовка" перед вмістом, як брати, а також той самий CSS буде працювати. Однак, IE7- не трактує висоту правильно, якщо поплавок у цьому випадку становить 100%, тому заголовок повинен бути IN вмістом, як вище. Переповнення: автоматично призведе до подвійних смуг прокрутки в IE (на якому завжди видно смугу прокрутки вікна перегляду, але вимкнено), але без неї вміст буде відсікатися, якщо він переповнюється.

Якщо ви можете мати справу з тим, що не підтримують старі веб-переглядачі (тобто MSIE 9 або старіші), ви можете зробити це за допомогою модуля гнучкої компонування коробки, який вже є W3C CR. Цей модуль також дозволяє виконувати інші приємні хитрощі, наприклад, переупорядкувати вміст.

На жаль, MSIE 9 або менше не підтримують це, і вам доведеться використовувати префікс постачальника для властивості CSS для кожного браузера, окрім Firefox. Сподіваємось, інші постачальники теж скоро скидають префікс.

Іншим вибором буде CSS Grid Layout, але він має ще меншу підтримку стабільних версій браузерів. На практиці це підтримує лише MSIE 10.

Я деякий час боровся з цим і закінчив таке:

Оскільки легко зробити вміст DIV такої ж висоти, як і батьківський, але, мабуть, важко зробити його батьківською висотою за вирахуванням висоти заголовка, я вирішив зробити вміст діви на повний зріст, але розташувати його абсолютно у верхньому лівому куті, а потім визначити прокладку для верхньої частини, яка має висоту заголовка. Таким чином вміст акуратно відображається під заголовком і заповнює весь простір, що залишився:

body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    height: 100%;
}

CSS Grid Solution

Просто Визначаючи bodyз display:gridі grid-template-rowsвикористанням autoі frзначення властивості.

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  padding: 1em;
  background: pink;
}

main {
  padding: 1em;
  background: lightblue;
}

footer {
  padding: 2em;
  background: lightgreen;
}

main:hover {
  height: 2000px;
  /* demos expansion of center element */
}

<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

Повне керівництво по сітках @ CSS-Tricks.com

Чому б не просто так?

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

Даючи вам html та body (у такому порядку) висоту, а потім просто надайте своїм елементам висоту?

Працює для мене

Насправді ви можете display: tableрозділити область на два елементи (заголовок і вміст), де заголовок може відрізнятися за висотою, а вміст заповнює залишок місця. Це працює з цілою сторінкою, а також, коли область просто вміст іншого елемента, розміщеного з positionвстановленим на relative, absoluteабо fixed. Він буде працювати до тих пір, поки батьківський елемент не має нульової висоти.

Дивіться цю загадку, а також код нижче:

CSS:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

HTML:

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>

 style="height:100vh"

вирішив проблему для мене. У моєму випадку я застосував це до потрібного діла

Вінсент, я ще раз відповім, використовуючи ваші нові вимоги. Оскільки вам не байдуже, чи вміст буде прихованим, якщо він занадто довгий, вам не потрібно плавати заголовком. Просто поставте переповнення, приховані в тегах html та body, і встановіть #contentвисоту на 100%. Вміст завжди буде довше вікна перегляду за висотою заголовка, але він буде прихованим і не спричинятиме смуги прокрутки.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <style type="text/css">
    body, html {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      color: #FFF;
    }
    p {
      margin: 0;
    }

    #header {
      background: red;
    }

    #content {
      position: relative;
      height: 100%;
      background: blue;
    }

    #content #positioned {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="header">
    Header
    <p>Header stuff</p>
  </div>

  <div id="content">
    Content
    <p>Content stuff</p>
    <div id="positioned">Positioned Content</div>
  </div>

</body>
</html>

Спробуйте це

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);

Я знайшов досить просте рішення, оскільки для мене це було лише питання дизайну. Я хотів, щоб решта сторінки не була білою нижче червоного колонтитулу. Тому я встановив колір фону сторінок червоним. А вміст фонового кольору - білий. З висотою вмісту, встановленою, наприклад. 20ем або 50% майже порожня сторінка не залишить всю сторінку червоною.

У мене була така ж проблема, але я не міг змусити працювати над вирішенням флексоксив вище. Тому я створив власний шаблон, який включає:

• заголовок із елементом фіксованого розміру
• колонтитул
• бічна смуга зі смугою прокрутки, яка займає решту висоти
• зміст

Я використовував флексокси, але більш простим способом, використовуючи лише відображення властивостей : flex та flex- smer : рядок | стовпець :

Я використовую кутові, і я хочу, щоб розміри моїх компонентів були на 100% від їх батьківського елемента.

Ключ полягає в тому, щоб встановити розмір (у відсотках) для всіх батьків в порядку, щоб обмежити їх розмір. У наступному прикладі висота myapp має 100% вікна перегляду.

Основний компонент має 90% області перегляду, тому що заголовок і колонтитул мають 5%.

Я розмістив свій шаблон тут: https://jsfiddle.net/abreneliere/mrjh6y2e/3

       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }

Html:

<body>
<div id="myapp">
    <div id="header">
        HEADER
        <div class="fized_size_element"></div>

    </div>
    <div id="main">
        <div id="sidebar">
            SIDEBAR
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>
</body>

Для мобільних додатків я використовую лише VH та VW

<div class="container">
  <div class="title">Title</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
  font-size: 5vh;
}

.title {
  height: 20vh;
  background-color: red;
}

.content {
  height: 60vh;
  background: blue;
}

.footer {
  height: 20vh;
  background: green;
}

Демо - https://jsfiddle.net/u763ck92/

Спінінг ідеї містера Чужого ...

Це здається більш чистим рішенням, ніж популярне поле для веб-переглядачів із підтримкою CSS3.

Просто використовуйте міні-висоту (замість висоти) з calc () до блоку вмісту.

Calc () починається зі 100% і віднімає висоту верхнього та нижнього колонтитулів (потрібно включати значення прокладки)

Використання "мінімальної висоти" замість "висоти" є особливо корисним, тому вона може працювати з контентом, наданим JavaScript, та рамками JS, як Angular2. Інакше обчислення не підніме нижній колонтитул у нижню частину сторінки, коли вміст відображеного javascript буде видно.

Ось простий приклад заголовка та колонтитулу з використанням висоти 50 пікселів та 20 пікселів для обох.

Html:

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

Css:

.content {
    min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}

Звичайно, математику можна спростити, але ви розумієте ...

У Bootstrap:

Стилі CSS:

html, body {
    height: 100%;
}

1) Просто заповніть висоту залишку екрану:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1>

    <header>Header</header>
    <div>Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

2) заповніть висоту залишку екрану та вирівнюючи вміст до середини батьківського елемента:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1">

    <header>Header</header>
    <div class="d-flex flex-column flex-grow-1 justify-content-center">Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

Це моя власна мінімальна версія рішення Pebbl. Вічно знайшов трюк, щоб змусити його працювати в IE11. (Тестується також у Chrome, Firefox, Edge та Safari.)

<!DOCTYPE html>
<html>
<head>
<style>
html {
    height: 100%;
    }
body {
    height: 100%;
    margin: 0;
    }
section {
    display: flex;
    flex-direction: column;
    height: 100%;
    }
div:first-child {
    background: gold;
    }
div:last-child {
    background: plum;
    flex-grow: 1;
    }
</style>
</head>
<body>
    <section>
      <div>FIT</div>
      <div>GROW</div>
    </section>
</body>
</html>