Сделать div заполнить высоту оставшегося места на экране

Я работаю над веб-приложением, в котором я хочу, чтобы контент занимал всю высоту экрана.

Страница имеет заголовок, который содержит логотип и информацию об учетной записи. Это может быть произвольная высота. Я хочу, чтобы div содержимого заполнил оставшуюся часть страницы до конца.

У меня есть заголовок 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>

Вся высота страницы заполнена, и прокрутка не требуется.

Для чего-либо внутри содержимого div, установка top: 0;поместит его прямо под заголовком. Иногда содержимое будет реальной таблицей с высотой, установленной на 100%. Помещение headerвнутрь contentне позволит этому работать.

Есть ли способ добиться того же эффекта без использования table?

Обновить:

Элементы внутри контента также divбудут иметь высоту, установленную в процентах. Так что что-то на 100% внутри divзаполнит его до дна. Как будет два элемента на 50%.

Обновление 2:

Например, если заголовок занимает 20% высоты экрана, таблица, указанная в 50%, #contentбудет занимать 40% пространства экрана. Пока единственное, что работает, - это завернуть все в таблицу.

Обновление 2015: подход flexbox

Есть два других ответа, кратко упоминающих flexbox ; однако это было более двух лет назад, и они не дают никаких примеров. Спецификация для flexbox определенно исчерпана.

Примечание. Хотя спецификация CSS Flexible Boxes Layout находится на этапе рекомендации кандидата, не все браузеры его реализовали. Реализация WebKit должна иметь префикс -webkit-; Internet Explorer реализует старую версию спецификации с префиксом -ms-; В Opera 12.10 реализована последняя версия спецификации без префикса. См. Таблицу совместимости для каждого свойства для получения информации о состоянии совместимости.

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

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

Чтобы проверить текущую поддержку вы также можете посмотреть здесь: http://caniuse.com/#feat=flexbox

Рабочий пример

С помощью flexbox вы можете легко переключаться между строками или столбцами с фиксированными размерами, размерами содержимого или размерами оставшегося пространства. В моем примере я установил привязку заголовка к его содержимому (согласно вопросу OP), я добавил нижний колонтитул, чтобы показать, как добавить область фиксированной высоты, а затем установил область содержимого, чтобы заполнить оставшееся пространство.

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 , выше, гибкий Shorthands недвижимости прогибается вырастал , изгибать-усадочный и прогибаются базисные свойства , чтобы установить гибкость гибких элементов. Mozilla хорошо знакомит с моделью гибких коробок .

На самом деле не существует надежного кросс-браузерного способа сделать это в CSS. Предполагая, что у вашего макета есть сложности, вам нужно использовать JavaScript, чтобы установить высоту элемента. Суть того, что вам нужно сделать, это:

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

Как только вы сможете получить это значение и установить высоту элемента, вам нужно прикрепить обработчики событий как к окнам onload, так и к onresize, чтобы вы могли запустить свою функцию изменения размера.

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

Оригинальный пост более 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 +, все современные браузеры и мобильные устройства ( caniuse )

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>

Простое решение с использованием flexbox:

html,
body {
  height: 100%;
}

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

.content {
  flex-grow: 1;
}

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

Образец кода

Альтернативное решение, с div в центре содержимого div

Как насчет того, чтобы просто использовать то, 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.

Если вам даже повезло, и ваши пользователи используют браузеры верхнего уровня (например, если это приложение для внутренней сети на компьютерах, которыми вы управляете, как, например, мой последний проект), вы можете использовать новый Гибкий макет коробки в CSS3!

Что сработало для меня (с div внутри другого div, и я предполагаю, что во всех других обстоятельствах), это установить нижний отступ на 100%. То есть добавьте это в свою таблицу CSS / стилей:

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 */
}

Решение выше использует единицы просмотра и flexbox , поэтому используется IE10 +, при условии, что вы используете старый синтаксис для IE10.

Codepen, чтобы играть с: ссылка на 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>

Во всех здравомыслящих браузерах вы можете поместить div "header" перед содержимым, как один брат, и тот же CSS будет работать. Однако IE7- неправильно интерпретирует высоту, если в этом случае значение float составляет 100%, поэтому заголовок должен быть в содержимом, как указано выше. Переполнение: авто вызовет двойные полосы прокрутки в IE (у которого всегда есть видимая, но отключенная полоса прокрутки в окне просмотра, но без нее содержимое будет обрезаться, если оно переполнится.

Некоторое время я боролся с этим и в итоге получил следующее:

Поскольку содержимое DIV контента легко сделать такой же высоты, что и родительский, но, по-видимому, сложно сделать его родительской высотой минус высота заголовка, я решил сделать содержимое 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%;
}

Если вы можете справиться с тем, что не поддерживает старые браузеры (то есть MSIE 9 или более ранние версии), вы можете сделать это с модулем Flexible Box Layout Module. который уже является W3C CR. Этот модуль позволяет использовать и другие полезные приемы, такие как изменение порядка содержимого.

К сожалению, MSIE 9 или ниже не поддерживает это, и вы должны использовать префикс поставщика для свойства CSS для каждого браузера, кроме Firefox. Надеюсь, другие поставщики тоже скоро прекратят использование префикса.

Другим вариантом может быть CSS Grid Layout, но он еще меньше поддерживается стабильными версиями браузеров. На практике только MSIE 10 поддерживает это.

Обновление до 2020 года : все современные браузеры поддерживают как display: flexи display: grid. Единственное, чего не хватает, так это поддержки, subgridподдерживаемой только Firefox. Обратите внимание, что MSIE не поддерживает ни спецификацию, но, если вы хотите добавить специфичные для MSIE хаки CSS, это можно сделать так, чтобы они себя вели. Я бы предложил просто игнорировать MSIE, потому что даже Microsoft говорит, что его больше нельзя использовать.

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"

решил проблему для меня. В моем случае я применил это к необходимому div

Винсент, я отвечу снова, используя твои новые требования. Поскольку вам не нужно скрывать содержимое, если оно слишком длинное, вам не нужно перемещать заголовок. Просто оставьте переполнение скрытым в тегах 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);

Я нашел довольно простое решение, потому что для меня это была просто проблема дизайна. Я хотел, чтобы остальная часть страницы не была белой под красным колонтитулом. Поэтому я установил красный цвет фона страниц. И содержимое backgroundcolor к белому. При высоте содержимого, например, 20em или 50% почти пустая страница не оставит всю страницу красной.

У меня была та же проблема, но я не мог заставить работать решение с флексбоксами выше. Поэтому я создал свой собственный шаблон, который включает в себя:

• заголовок с элементом фиксированного размера
• нижний колонтитул
• боковая панель с полосой прокрутки, которая занимает оставшуюся высоту
• содержание

Я использовал flexbox, но более простым способом, используя только свойства display: flex и flex-direction: row | column :

Я использую угловой и хочу, чтобы размеры моих компонентов составляли 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/

Отвергая идею мистера Чужого ...

Это кажется более чистым решением, чем популярный flex box для браузеров с поддержкой CSS3.

Просто используйте min-height (вместо height) с calc () для блока содержимого.

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

Использование «min-height» вместо «height» особенно полезно, так как оно может работать с визуализированным содержимым javascript и средами JS, такими как Angular2. В противном случае вычисление не будет сдвигать нижний колонтитул в конец страницы, когда визуализированный контент javascript станет видимым.

Вот простой пример заголовка и нижнего колонтитула, использующих 50px height и 20px padding для обоих.

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>