Haga que un div llene la altura del espacio restante de la pantalla

Estoy trabajando en una aplicación web donde quiero que el contenido llene la altura de toda la pantalla.

La página tiene un encabezado, que contiene un logotipo e información de la cuenta. Esto podría ser una altura arbitraria. Quiero que el div de contenido llene el resto de la página hasta el final.

Tengo un encabezado divy un contenido div. En este momento estoy usando una tabla para el diseño de esta manera:

CSS y 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>

Se llena toda la altura de la página y no se requiere desplazamiento.

Para cualquier cosa dentro del contenido div, la configuración top: 0;lo colocará justo debajo del encabezado. A veces, el contenido será una tabla real, con su altura establecida al 100%. Poner headerdentro contentno permitirá que esto funcione.

¿Hay alguna manera de lograr el mismo efecto sin usar el table?

Actualizar:

Los elementos dentro del contenido divtambién tendrán alturas establecidas en porcentajes. Entonces, algo al 100% dentro divlo llenará hasta el fondo. Como lo harán dos elementos al 50%.

Actualización 2:

Por ejemplo, si el encabezado ocupa el 20% de la altura de la pantalla, una tabla especificada al 50% en el interior #contentocuparía el 40% del espacio de la pantalla. Hasta ahora, envolver todo en una tabla es lo único que funciona.

Actualización 2015: el enfoque flexbox

Hay otras dos respuestas que mencionan brevemente flexbox ; Sin embargo, eso fue hace más de dos años, y no proporcionan ningún ejemplo. La especificación para flexbox definitivamente se ha establecido ahora.

Nota: Aunque la especificación de diseño de cuadros flexibles de CSS se encuentra en la etapa de recomendación del candidato, no todos los navegadores la han implementado. La implementación de WebKit debe tener el prefijo -webkit-; Internet Explorer implementa una versión anterior de la especificación, con el prefijo -ms-; Opera 12.10 implementa la última versión de la especificación, sin prefijo. Consulte la tabla de compatibilidad de cada propiedad para obtener un estado de compatibilidad actualizado.

(tomado de https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes )

Todos los principales navegadores e IE11 + son compatibles con Flexbox. Para IE 10 o anterior, puede usar la cuña FlexieJS.

Para consultar el soporte actual, también puede ver aquí: http://caniuse.com/#feat=flexbox

Ejemplo de trabajo

Con flexbox puede cambiar fácilmente entre cualquiera de sus filas o columnas que tengan dimensiones fijas, dimensiones del tamaño del contenido o dimensiones del espacio restante. En mi ejemplo, configuré el encabezado para que se ajuste a su contenido (según la pregunta de los OP), agregué un pie de página para mostrar cómo agregar una región de altura fija y luego configuré el área de contenido para llenar el espacio restante.

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>

En el CSS anterior, los flex taquigrafías propiedad del flex-Grow , flex-contracción y flexible básicos propiedades para establecer la flexibilidad de los elementos flexibles. Mozilla tiene una buena introducción al modelo de cajas flexibles .

Realmente no hay una forma de sonido cruzada para hacer esto en CSS. Suponiendo que su diseño tiene complejidades, debe usar JavaScript para establecer la altura del elemento. La esencia de lo que necesitas hacer es:

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

Una vez que pueda obtener este valor y establecer la altura del elemento, debe adjuntar controladores de eventos a la ventana onload y onresize para que pueda activar su función de cambio de tamaño.

Además, suponiendo que su contenido pueda ser más grande que la ventana gráfica, necesitará configurar overflow-y para desplazarse.

La publicación original es hace más de 3 años. Supongo que muchas personas que vienen a esta publicación como yo están buscando una solución de diseño similar a una aplicación, digamos un encabezado, pie de página y contenido de altura completa que de alguna manera ocupan la pantalla de descanso. Si es así, esta publicación puede ayudar, funciona en IE7 +, etc.

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

Y aquí hay algunos fragmentos de esa publicación:

@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>

En lugar de usar tablas en el marcado, puede usar tablas CSS.

Margen

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

(Relevante) CSS

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

FIDDLE1 y FIDDLE2

Algunas ventajas de este método son:

1) Menos marcado

2) El marcado es más semántico que las tablas, porque no se trata de datos tabulares.

3) El soporte del navegador es muy bueno : IE8 +, todos los navegadores modernos y dispositivos móviles ( 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 } 

Aproximación solo CSS (si la altura es conocida / fija)

Cuando desee que el elemento central abarque toda la página verticalmente, puede usar el calc()que se introduce en CSS3.

Suponiendo que tenemos una altura header y footerelementos fijos y queremos que la sectionetiqueta tome toda la altura vertical disponible ...

Manifestación

Supuesto marcado y su CSS debe ser

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>

Entonces, aquí, lo que estoy haciendo es sumar la altura de los elementos y luego deducir del 100%uso de la calc()función.

Solo asegúrese de usarlo height: 100%;para los elementos principales.

Usado: height: calc(100vh - 110px);

código:

  
.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>

Una solución simple, usando flexbox:

html,
body {
  height: 100%;
}

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

.content {
  flex-grow: 1;
}

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

Codepen muestra

Una solución alternativa, con un div centrado dentro del contenido div

¿Qué tal sólo tiene que utilizar vhlo que significa view heighten CSS ...

Mira el fragmento de código que creé para ti a continuación y ejecútalo:

body {
  padding: 0;
  margin: 0;
}

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

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

Además, mira la imagen a continuación que creé para ti:

CSS3 manera simple

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

todos los principales navegadores de estos días lo admiten, así que adelante si no tiene el requisito de admitir navegadores antiguos.

Se podría hacer simplemente CSSusando 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;
}

y el HTML

<div id="page">

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

</div>

Lo he comprobado, Funciona en todos los principales navegadores: Chrome, IEyFireFox

Ninguna de las soluciones publicadas funciona cuando necesita que el div inferior se desplace cuando el contenido es demasiado alto. Aquí hay una solución que funciona en ese caso:

.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>

Fuente original: llenar la altura restante de un contenedor mientras se maneja el desbordamiento en CSS

Vista previa en vivo de JSFiddle

He estado buscando una respuesta para esto también. Si tiene la suerte de poder apuntar a IE8 y superior, puede usar display:tablevalores relacionados para obtener las reglas de representación de tablas con elementos de nivel de bloque, incluido div.

Si eres aún más afortunado y tus usuarios usan navegadores de primer nivel (por ejemplo, si se trata de una aplicación de intranet en las computadoras que controlas, como lo es mi último proyecto), ¡puedes usar el nuevo diseño de caja flexible en CSS3!

Lo que funcionó para mí (con un div dentro de otro div y supongo que en todas las demás circunstancias) es establecer el relleno inferior al 100%. Es decir, agregue esto a su hoja de estilo / CSS:

padding-bottom: 100%;

Descargo de responsabilidad: la respuesta aceptada da la idea de la solución, pero me parece un poco hinchada con un contenedor innecesario y reglas CSS. A continuación se muestra una solución con muy pocas reglas 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 */
}

La solución anterior usa unidades de ventana gráfica y flexbox , y por lo tanto es IE10 +, siempre que use la sintaxis anterior para IE10.

Codepen para jugar: enlace a codepen

O este, para aquellos que necesitan que el contenedor principal sea desplazable en caso de contenido desbordado: enlace al codepen

Ahora hay un montón de respuestas, pero descubrí que usar height: 100vh;para trabajar en el elemento div que necesita llenar todo el espacio vertical disponible.

De esta manera, no necesito jugar con la pantalla o el posicionamiento. Esto fue útil cuando utilicé Bootstrap para hacer un tablero en el que tenía una barra lateral y una principal. Quería que el principal se estirara y llenara todo el espacio vertical para poder aplicar un color de fondo.

div {
    height: 100vh;
}

Admite IE9 y versiones posteriores: haga clic para ver el enlace

<!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>

En todos los navegadores sanos, puede poner el div "encabezado" antes del contenido, como un hermano, y el mismo CSS funcionará. Sin embargo, IE7- no interpreta la altura correctamente si el flotante es 100% en ese caso, por lo que el encabezado debe estar EN el contenido, como se indicó anteriormente. El desbordamiento: auto causará barras de desplazamiento dobles en IE (que siempre tiene la barra de desplazamiento de la vista visible, pero deshabilitada), pero sin ella, el contenido se recortará si se desborda.

Luché con esto por un tiempo y terminé con lo siguiente:

Dado que es fácil hacer que el contenido DIV tenga la misma altura que el padre pero aparentemente es difícil hacerlo con la altura del padre menos la altura del encabezado, decidí hacer que el contenido se divida en la altura completa, pero colóquelo absolutamente en la esquina superior izquierda y luego defina un relleno para la parte superior que tiene la altura del encabezado. De esta forma, el contenido se muestra perfectamente debajo del encabezado y llena todo el espacio restante:

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%;
}

Si puede tratar de no admitir navegadores antiguos (es decir, MSIE 9 o anterior), puede hacerlo con el Módulo de diseño de caja flexible que ya es W3C CR. Ese módulo también permite otros buenos trucos, como reordenar contenido.

Desafortunadamente, MSIE 9 o versiones anteriores no son compatibles y debe usar el prefijo del proveedor para la propiedad CSS para todos los navegadores que no sean Firefox. Esperemos que otros proveedores también eliminen el prefijo pronto.

Otra opción sería CSS Grid Layout, pero eso tiene aún menos soporte de las versiones estables de los navegadores. En la práctica, solo MSIE 10 lo admite.

Actualización año 2020 : Todos los navegadores modernos son compatibles con ambos display: flexy display: grid. Lo único que falta es soporte para el subgridcual solo es compatible con Firefox. Tenga en cuenta que MSIE tampoco es compatible con la especificación, pero si está dispuesto a agregar hacks CSS específicos de MSIE, puede hacerlo funcionar. Sugeriría simplemente ignorar a MSIE porque incluso Microsoft dice que ya no debería usarse.

Solución de cuadrícula CSS

Simplemente definiendo la propiedad bodywith display:gridy the grid-template-rowsusing autoy the frvalue.

* {
  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>

Una guía completa de cuadrículas @ CSS-Tricks.com

¿Por qué no solo así?

html, body {
    height: 100%;
}

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

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

¿Le da una altura html y cuerpo (en ese orden) y luego solo le da una altura a sus elementos?

Funciona para mi

En realidad, puede usar display: tablepara dividir el área en dos elementos (encabezado y contenido), donde el encabezado puede variar en altura y el contenido llena el espacio restante. Esto funciona con toda la página, así como cuando el área es simplemente el contenido de otro elemento posicionado con positionset to relative, absoluteor fixed. Funcionará siempre que el elemento padre tenga una altura distinta de cero.

Vea este violín y también el código a continuación:

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"

Resuelto el problema para mí. En mi caso, apliqué esto al div requerido

Vincent, te responderé nuevamente usando tus nuevos requisitos. Como no le importa que el contenido esté oculto si es demasiado largo, no necesita flotar el encabezado. Simplemente coloque el desbordamiento oculto en las etiquetas html y body, y configure la #contentaltura al 100%. El contenido siempre será más largo que la ventana gráfica por la altura del encabezado, pero estará oculto y no provocará barras de desplazamiento.

<!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>

Prueba esto

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

Encontré una solución bastante simple, porque para mí era solo un problema de diseño. Quería que el resto de la página no fuera blanco debajo del pie de página rojo. Así que configuré el color de fondo de las páginas en rojo. Y el contenido backgroundcolor a blanco. Con la altura de contenido establecida en p. Ej. 20em o 50% una página casi vacía no dejará toda la página roja.

Tuve el mismo problema pero no pude hacer que el trabajo fuera la solución con los flexboxes anteriores. Así que creé mi propia plantilla, que incluye:

• un encabezado con un elemento de tamaño fijo
• un pie de página
• una barra lateral con una barra de desplazamiento que ocupa la altura restante
• contenido

Utilicé flexboxes pero de una manera más simple, utilizando solo las propiedades display: flex y flex-direction: row | column :

Yo uso angular y quiero que el tamaño de mis componentes sea el 100% de su elemento padre.

La clave es establecer el tamaño (en porcentajes) de todos los padres para limitar su tamaño. En el siguiente ejemplo, la altura de myapp tiene el 100% de la ventana gráfica.

El componente principal tiene el 90% de la ventana gráfica, porque el encabezado y el pie de página tienen el 5%.

Publiqué mi plantilla aquí: 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>

Para la aplicación móvil, solo uso VH y 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;
}

Demostración: https://jsfiddle.net/u763ck92/

Derivando la idea del Sr. Alien ...

Esta parece una solución más limpia que la popular caja flexible para navegadores habilitados para CSS3.

Simplemente use min-height (en lugar de height) con calc () para el bloque de contenido.

El calc () comienza con 100% y resta las alturas de los encabezados y pies de página (debe incluir valores de relleno)

El uso de "altura mínima" en lugar de "altura" es particularmente útil para que pueda funcionar con contenido renderizado de JavaScript y marcos JS como Angular2. De lo contrario, el cálculo no empujará el pie de página al final de la página una vez que el contenido renderizado de JavaScript esté visible.

Aquí hay un ejemplo simple de un encabezado y pie de página con 50 píxeles de altura y 20 píxeles de relleno para ambos.

HTML:

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

Css:

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

Por supuesto, las matemáticas pueden simplificarse, pero se entiende la idea ...

En Bootstrap:

Estilos CSS:

html, body {
    height: 100%;
}

1) Simplemente llene la altura del espacio de pantalla restante:

<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) llene la altura del espacio restante de la pantalla y alinee el contenido al centro del elemento principal:

<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>

Esta es mi propia versión mínima de la solución de Pebbl. Tomó una eternidad encontrar el truco para que funcione en IE11. (También probado en Chrome, Firefox, Edge y 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>