Fai un div riempire l'altezza dello spazio sullo schermo rimanente

Sto lavorando a un'applicazione Web in cui desidero che il contenuto riempia l'altezza dell'intero schermo.

La pagina ha un'intestazione, che contiene un logo e informazioni sull'account. Potrebbe essere un'altezza arbitraria. Voglio che il div del contenuto riempia il resto della pagina fino in fondo.

Ho un'intestazione dive un contenuto div. Al momento sto usando una tabella per il layout in questo modo:

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

L'intera altezza della pagina è piena e non è necessario lo scorrimento.

Per qualsiasi cosa all'interno del div del contenuto, l'impostazione top: 0;lo posizionerà proprio sotto l'intestazione. A volte il contenuto sarà una vera tabella, con la sua altezza impostata al 100%. Mettere headerdentro contentnon permetterà a questo di funzionare.

C'è un modo per ottenere lo stesso effetto senza usare il table?

Aggiornare:

Gli elementi all'interno del contenuto divavranno anche altezze impostate su percentuali. Quindi qualcosa al 100% all'interno lo divriempirà fino in fondo. Come due elementi al 50%.

Aggiornamento 2:

Ad esempio, se l'intestazione occupa il 20% dell'altezza dello schermo, una tabella specificata al 50% all'interno #contentoccuperebbe il 40% dello spazio dello schermo. Finora, avvolgere l'intera cosa in un tavolo è l'unica cosa che funziona.

Aggiornamento 2015: l'approccio flexbox

Ci sono altre due risposte che menzionano brevemente flexbox ; tuttavia, è stato più di due anni fa e non forniscono alcun esempio. Le specifiche per Flexbox sono state definitivamente risolte ora.

Nota: sebbene le specifiche del layout CSS per scatole flessibili siano nella fase di Raccomandazione dei candidati, non tutti i browser lo hanno implementato. L'implementazione di WebKit deve essere preceduta da -webkit-; Internet Explorer implementa una vecchia versione delle specifiche, con il prefisso -ms-; Opera 12.10 implementa l'ultima versione delle specifiche, non risolta. Vedere la tabella di compatibilità su ciascuna proprietà per uno stato di compatibilità aggiornato.

(tratto da https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/F Flexible_boxes )

Tutti i principali browser e IE11 + supportano Flexbox. Per IE 10 o versioni precedenti, è possibile utilizzare lo spessore FlexieJS.

Per verificare il supporto corrente puoi anche consultare qui: http://caniuse.com/#feat=flexbox

Esempio funzionante

Con flexbox puoi passare facilmente da una qualsiasi delle tue righe o colonne a dimensioni fisse, dimensioni dei contenuti o dimensioni dello spazio rimanente. Nel mio esempio ho impostato l'intestazione per agganciarla al suo contenuto (come per la domanda sui PO), ho aggiunto un piè di pagina per mostrare come aggiungere una regione ad altezza fissa e quindi impostare l'area del contenuto per riempire lo spazio rimanente.

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>

Nel CSS sopra, i flex abbreviazioni di proprietà del flex-grow , flex-shrink , e flex-base proprietà per stabilire la flessibilità degli elementi flessibili. Mozilla ha una buona introduzione al modello di scatole flessibili .

Non esiste davvero un modo valido e cross-browser per farlo in CSS. Supponendo che il layout abbia complessità, è necessario utilizzare JavaScript per impostare l'altezza dell'elemento. L'essenza di ciò che devi fare è:

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

Una volta ottenuto questo valore e impostato l'altezza dell'elemento, è necessario collegare i gestori di eventi sia al caricamento della finestra che al ridimensionamento in modo da poter attivare la funzione di ridimensionamento.

Inoltre, supponendo che i tuoi contenuti possano essere più grandi del viewport, dovrai impostare overflow-y per scorrere.

Il post originale è più di 3 anni fa. Immagino che molte persone che arrivano in questo post come me siano alla ricerca di una soluzione di layout simile ad un'app, per esempio un'intestazione, un piè di pagina e un contenuto a tutta altezza fissi che occupino la schermata di riposo. In tal caso, questo post può aiutare, funziona su IE7 +, ecc.

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

E qui ci sono alcuni frammenti di quel post:

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

Invece di utilizzare le tabelle nel markup, è possibile utilizzare le tabelle CSS.

markup

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

(Rilevante) CSS

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

FIDDLE1 e FIDDLE2

Alcuni vantaggi di questo metodo sono:

1) Meno markup

2) Il markup è più semantico delle tabelle, perché non si tratta di dati tabulari.

3) Il supporto del browser è molto buono : IE8 +, Tutti i browser e dispositivi mobili moderni ( 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 } 

Approccio solo CSS (se l'altezza è nota / fissa)

Quando vuoi che l'elemento centrale si estenda su tutta la pagina in verticale, puoi usare quello calc()che è stato introdotto in CSS3.

Supponendo che abbiamo un'altezza header e footerelementi fissi e vogliamo che il sectiontag prenda l'intera altezza verticale disponibile ...

dimostrazione

Assunto markup e CSS dovrebbe essere

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>

Quindi qui, ciò che sto facendo è sommare l'altezza degli elementi e quindi dedurre 100%dall'uso della calc()funzione.

Assicurati solo di usarlo height: 100%;per gli elementi principali.

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

codice:

  
.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 soluzione semplice, 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>

Campione di Codepen

Una soluzione alternativa, con un div centrato nel div contenuto

Che ne dite è sufficiente utilizzare vhche sta per view heightin CSS ...

Guarda lo snippet di codice che ho creato per te di seguito ed eseguilo:

body {
  padding: 0;
  margin: 0;
}

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

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

Inoltre, guarda l'immagine sotto la quale ho creato per te:

CSS3 modo semplice

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

al giorno d'oggi tutti i principali browser lo supportano, quindi vai avanti se non hai bisogno di supportare i browser vintage.

Si potrebbe fare semplicemente 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;
}

e il HTML

<div id="page">

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

</div>

Ho controllato, Funziona in tutti i principali browser: Chrome, IE, eFireFox

Nessuna delle soluzioni pubblicate funziona quando è necessario il div inferiore per scorrere quando il contenuto è troppo alto. Ecco una soluzione che funziona in quel 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>

Fonte originale: riempimento dell'altezza rimanente di un contenitore durante la gestione dell'overflow nei CSS

JSFiddle anteprima dal vivo

Ho cercato una risposta anche per questo. Se sei abbastanza fortunato da essere in grado di scegliere come target IE8 e versioni successive, puoi utilizzare display:tablei valori correlati per ottenere le regole di rendering delle tabelle con elementi a livello di blocco incluso div.

Se sei ancora più fortunato e i tuoi utenti utilizzano browser di livello superiore (ad esempio, se si tratta di un'app Intranet su computer che controlli, come il mio ultimo progetto è), puoi utilizzare il nuovo Layout box flessibile in CSS3!

Ciò che ha funzionato per me (con un div all'interno di un altro div e presumo in tutte le altre circostanze) è impostare l'imbottitura inferiore al 100%. Cioè, aggiungi questo al tuo css / foglio di stile:

padding-bottom: 100%;

Disclaimer: la risposta accettata dà l'idea della soluzione, ma la trovo un po 'gonfia con un wrapper non necessario e regole CSS. Di seguito è una soluzione con pochissime regole 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 soluzione precedente utilizza le unità viewport e flexbox ed è quindi IE10 +, fornendo la vecchia sintassi per IE10.

Codepen con cui giocare: link to codepen

O questo, per coloro che necessitano che il contenitore principale sia scorrevole in caso di contenuto traboccante: link to codepen

Ci sono un sacco di risposte ora, ma ho scoperto che usare height: 100vh;per lavorare sull'elemento div che deve riempire l'intero spazio verticale disponibile.

In questo modo, non ho bisogno di giocare con il display o il posizionamento. Questo è stato utile quando ho usato Bootstrap per creare una dashboard in cui avevo una barra laterale e una principale. Volevo che il main si allungasse e riempisse l'intero spazio verticale in modo da poter applicare un colore di sfondo.

div {
    height: 100vh;
}

Supporta IE9 e versioni successive: fare clic per visualizzare il collegamento

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

In tutti i browser sani, puoi mettere il div "header" prima del contenuto, come fratello, e lo stesso CSS funzionerà. Tuttavia, IE7- non interpreta correttamente l'altezza se il float è del 100% in quel caso, quindi l'intestazione deve essere IN nel contenuto, come sopra. L'overflow: auto causerà doppie barre di scorrimento su IE (che ha sempre la barra di scorrimento del viewport visibile, ma disabilitata), ma senza di essa, il contenuto verrà clip se trabocca.

Ho lottato con questo per un po 'e ho finito con il seguente:

Dato che è facile rendere il contenuto DIV della stessa altezza del genitore ma apparentemente difficile renderlo l'altezza del genitore meno l'altezza dell'intestazione, ho deciso di rendere il contenuto div a tutta altezza ma posizionarlo assolutamente nell'angolo in alto a sinistra e quindi definire un'imbottitura per la parte superiore che ha l'altezza dell'intestazione. In questo modo il contenuto viene visualizzato in modo ordinato sotto l'intestazione e riempie l'intero spazio rimanente:

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

Se è possibile gestire il mancato supporto dei browser precedenti (ovvero MSIE 9 o precedenti), è possibile farlo con il modulo di layout box flessibile che è già W3C CR. Quel modulo consente anche altri trucchi interessanti, come riordinare i contenuti.

Sfortunatamente, MSIE 9 o inferiore non supporta questo e devi usare il prefisso del fornitore per la proprietà CSS per ogni browser diverso da Firefox. Speriamo che anche altri venditori abbandonino presto il prefisso.

Un'altra scelta sarebbe il layout griglia CSS ma che ha ancora meno supporto da versioni stabili di browser. In pratica, solo MSIE 10 supporta questo.

Aggiornamento anno 2020 : tutti i browser moderni supportano sia display: flexe display: grid. L'unico elemento mancante è il supporto per il subgridquale è supportato solo da Firefox. Nota che MSIE non supporta né le specifiche, ma se sei disposto ad aggiungere hack CSS specifici di MSIE, può essere fatto per comportarsi. Suggerirei semplicemente di ignorare MSIE perché anche Microsoft afferma che non dovrebbe più essere utilizzato.

Soluzione griglia CSS

Definendo solo la proprietà bodywith display:gride grid-template-rowsusing autoe 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 guida completa a Grids @ CSS-Tricks.com

Perché non proprio così?

html, body {
    height: 100%;
}

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

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

Darti html e body (in quell'ordine) un'altezza e poi dare un'altezza ai tuoi elementi?

Per me va bene

Puoi effettivamente utilizzare display: tableper dividere l'area in due elementi (intestazione e contenuto), in cui l'intestazione può variare in altezza e il contenuto riempie lo spazio rimanente. Funziona con l'intera pagina, nonché quando l'area è semplicemente il contenuto di un altro elemento posizionato con positionset su relative, absoluteo fixed. Funzionerà finché l'elemento genitore ha un'altezza diversa da zero.

Vedi questo violino e anche il codice qui sotto:

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"

risolto il problema per me. Nel mio caso l'ho applicato al div richiesto

Vincent, risponderò di nuovo usando i tuoi nuovi requisiti. Poiché non ti interessa che il contenuto venga nascosto se è troppo lungo, non è necessario spostare l'intestazione. Basta mettere l'overflow nascosto sui tag html e body e impostare l' #contentaltezza al 100%. Il contenuto sarà sempre più lungo del viewport dall'altezza dell'intestazione, ma sarà nascosto e non causerà barre di scorrimento.

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

Prova questo

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

Ho trovato una soluzione abbastanza semplice, perché per me era solo un problema di progettazione. Volevo che il resto della Pagina non fosse bianco sotto il piè di pagina rosso. Quindi ho impostato il colore di sfondo delle pagine su rosso. E il contenuto si colora di bianco. Con l'altezza del contenuto impostata su es. 20em o 50% una pagina quasi vuota non lascerà l'intera pagina in rosso.

Ho avuto lo stesso problema ma non sono riuscito a far funzionare la soluzione con i flexbox sopra. Quindi ho creato il mio modello, che include:

• un'intestazione con un elemento di dimensioni fisse
• un piè di pagina
• una barra laterale con una barra di scorrimento che occupa l'altezza rimanente
• soddisfare

Ho usato i flexbox ma in un modo più semplice, usando solo le proprietà display: flex e flex-direction: row | column :

Uso angolare e desidero che le dimensioni dei miei componenti siano al 100% dell'elemento principale.

La chiave è impostare la dimensione (in percentuale) per tutti i genitori in ordine per limitarne la dimensione. Nel seguente esempio l'altezza di myapp ha il 100% della finestra.

Il componente principale ha il 90% della finestra, perché l'intestazione e il piè di pagina hanno il 5%.

Ho pubblicato il mio modello qui: 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>

Per le app mobili utilizzo solo VH e 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;
}

Demo - https://jsfiddle.net/u763ck92/

Spinning fuori l'idea di Mr. Alien ...

Questa sembra una soluzione più pulita rispetto alla popolare scatola flessibile per browser abilitati per CSS3.

Usa semplicemente l'altezza minima (anziché l'altezza) con calc () nel blocco di contenuto.

Calc () inizia con il 100% e sottrae le altezze di intestazioni e piè di pagina (è necessario includere valori di riempimento)

L'uso di "altezza minima" anziché di "altezza" è particolarmente utile in modo che possa funzionare con contenuti renderizzati javascript e framework JS come Angular2. Altrimenti, il calcolo non spingerà il piè di pagina in fondo alla pagina una volta che il contenuto renderizzato javascript è visibile.

Ecco un semplice esempio di intestazione e piè di pagina con altezza 50px e imbottitura 20px per entrambi.

html:

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

Css:

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

Certo, la matematica può essere semplificata ma hai l'idea ...

In Bootstrap:

Stili CSS:

html, body {
    height: 100%;
}

1) Basta riempire l'altezza dello spazio sullo schermo rimanente:

<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) riempire l'altezza dello spazio sullo schermo rimanente e allineare il contenuto al centro dell'elemento genitore:

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

Questa è la mia versione minima della soluzione di Pebbl. Impiegato un'eternità per trovare il trucco per farlo funzionare in IE11. (Testato anche su Chrome, Firefox, Edge e 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>