Faire un div remplir la hauteur de l'espace d'écran restant

Je travaille sur une application web où je souhaite que le contenu remplisse la hauteur de tout l'écran.

La page a un en-tête, qui contient un logo et des informations de compte. Cela pourrait être une hauteur arbitraire. Je veux que la div de contenu remplisse le reste de la page vers le bas.

J'ai un en-tête divet un contenu div. En ce moment j'utilise un tableau pour la mise en page comme ceci:

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

La hauteur entière de la page est remplie et aucun défilement n'est requis.

Pour tout ce qui se trouve à l'intérieur de la division de contenu, le paramètre le top: 0;placera juste sous l'en-tête. Parfois, le contenu sera une vraie table, avec sa hauteur réglée à 100%. Mettre à l' headerintérieur contentne permettra pas que cela fonctionne.

Existe-t-il un moyen d'obtenir le même effet sans utiliser le table?

Mise à jour:

Les éléments à l'intérieur du contenu divauront également des hauteurs définies en pourcentages. Donc, quelque chose à 100% à l'intérieur le divremplira jusqu'au fond. De même que deux éléments à 50%.

Mise à jour 2:

Par exemple, si l'en-tête occupe 20% de la hauteur de l'écran, une table spécifiée à 50% à l'intérieur #contentoccuperait 40% de l'espace d'écran. Jusqu'à présent, envelopper le tout dans une table est la seule chose qui fonctionne.

Mise à jour 2015: l'approche flexbox

Il y a deux autres réponses mentionnant brièvement Flexbox ; cependant, c'était il y a plus de deux ans, et ils ne fournissent aucun exemple. La spécification pour flexbox est définitivement établie.

Remarque: Bien que la spécification de disposition des boîtes flexibles CSS soit au stade de la recommandation du candidat, tous les navigateurs ne l'ont pas implémentée. L'implémentation de WebKit doit être préfixée avec -webkit-; Internet Explorer implémente une ancienne version de la spécification, préfixée avec -ms-; Opera 12.10 implémente la dernière version de la spécification, non préfixée. Consultez le tableau de compatibilité de chaque propriété pour un état de compatibilité à jour.

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

Tous les principaux navigateurs et IE11 + prennent en charge Flexbox. Pour IE 10 ou une version antérieure, vous pouvez utiliser la cale FlexieJS.

Pour vérifier le support actuel, vous pouvez également voir ici: http://caniuse.com/#feat=flexbox

Exemple de travail

Avec flexbox, vous pouvez facilement basculer entre n'importe laquelle de vos lignes ou colonnes ayant des dimensions fixes, des dimensions de contenu ou des dimensions d'espace restant. Dans mon exemple, j'ai défini l'en-tête pour qu'il s'aligne sur son contenu (conformément à la question OP), j'ai ajouté un pied de page pour montrer comment ajouter une région à hauteur fixe, puis définir la zone de contenu pour remplir l'espace restant.

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>

Dans le CSS ci-dessus, la propriété flex raccourcit les propriétés flex-grow , flex-shrink et flex- based pour établir la flexibilité des éléments flex. Mozilla a une bonne introduction au modèle des boîtes flexibles .

Il n'y a vraiment pas de méthode saine et multi-navigateur pour le faire en CSS. En supposant que votre mise en page est complexe, vous devez utiliser JavaScript pour définir la hauteur de l'élément. L'essence de ce que vous devez faire est:

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

Une fois que vous pouvez obtenir cette valeur et définir la hauteur de l'élément, vous devez attacher des gestionnaires d'événements à la fois à la fenêtre onload et à onresize afin de pouvoir déclencher votre fonction de redimensionnement.

En outre, en supposant que votre contenu soit plus volumineux que la fenêtre d'affichage, vous devrez définir overflow-y pour faire défiler.

Le message d'origine date de plus de 3 ans. Je suppose que de nombreuses personnes qui viennent à ce poste comme moi recherchent une solution de mise en page similaire à une application, par exemple un en-tête, un pied de page et un contenu pleine hauteur fixes occupant l'écran de repos. Si c'est le cas, ce message peut vous aider, il fonctionne sur IE7 +, etc.

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

Et voici quelques extraits de ce message:

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

Au lieu d'utiliser des tables dans le balisage, vous pouvez utiliser des tables CSS.

Marquage

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

(Pertinent) CSS

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

FIDDLE1 et FIDDLE2

Certains avantages de cette méthode sont:

1) Moins de majoration

2) Le balisage est plus sémantique que les tableaux, car il ne s'agit pas de données tabulaires.

3) Le support du navigateur est très bon : IE8 +, tous les navigateurs et appareils mobiles modernes ( 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 } 

Approche CSS uniquement (si la hauteur est connue / fixe)

Lorsque vous souhaitez que l'élément du milieu s'étende verticalement sur toute la page, vous pouvez utiliser calc()ce qui est introduit dans CSS3.

En supposant que nous ayons une hauteur header et des footeréléments fixes et que nous voulons que la sectionbalise prenne toute la hauteur verticale disponible ...

Démo

Le balisage supposé et votre CSS doivent être

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>

Donc, ici, ce que je fais, c'est additionner la hauteur des éléments et déduire de l' 100%utilisation de la calc()fonction.

Assurez-vous simplement que vous utilisez height: 100%;pour les éléments parents.

Utilisé: height: calc(100vh - 110px);

code:

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

Une solution simple, utilisant flexbox:

html,
body {
  height: 100%;
}

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

.content {
  flex-grow: 1;
}

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

Échantillon Codepen

Une solution alternative, avec un div centré dans le contenu div

Que diriez-vous d'utiliser simplement vhce qui signifie view heighten CSS ...

Regardez l' extrait de code que j'ai créé pour vous ci-dessous et exécutez-le:

body {
  padding: 0;
  margin: 0;
}

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

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

Regardez également l'image ci-dessous que j'ai créée pour vous:

CSS3 Simple Way

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

tous les principaux navigateurs les prennent en charge de nos jours, alors allez-y si vous n'avez pas besoin de prendre en charge les navigateurs vintage.

Cela pourrait être fait uniquement en CSSutilisant 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;
}

et le HTML

<div id="page">

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

</div>

Je l' ai vérifié, il fonctionne dans tous les principaux navigateurs: Chrome, IEetFireFox

Aucune des solutions publiées ne fonctionne lorsque vous avez besoin que le div inférieur défile lorsque le contenu est trop grand. Voici une solution qui fonctionne dans ce cas:

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

Source d'origine: Remplir la hauteur restante d'un conteneur tout en gérant le débordement en CSS

Aperçu en direct de JSFiddle

J'ai également cherché une réponse à cela. Si vous avez la chance de pouvoir cibler IE8 et versions ultérieures, vous pouvez utiliser display:tableles valeurs associées pour obtenir les règles de rendu des tableaux avec des éléments de niveau bloc, y compris div.

Si vous êtes encore plus chanceux et que vos utilisateurs utilisent des navigateurs de premier plan (par exemple, s'il s'agit d'une application intranet sur des ordinateurs que vous contrôlez, comme mon dernier projet), vous pouvez utiliser la nouvelle disposition de boîte flexible en CSS3!

Ce qui a fonctionné pour moi (avec un div dans un autre div et je suppose dans toutes les autres circonstances) est de régler le rembourrage inférieur à 100%. Autrement dit, ajoutez ceci à votre feuille de style / CSS:

padding-bottom: 100%;

Avertissement: La réponse acceptée donne l'idée de la solution, mais je la trouve un peu gonflée par un wrapper inutile et des règles CSS. Voici une solution avec très peu de règles 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 solution ci-dessus utilise des unités de fenêtre et une boîte flexible , et est donc IE10 +, à condition que vous utilisiez l'ancienne syntaxe pour IE10.

Codepen pour jouer avec: lien vers codepen

Ou celui-ci, pour ceux qui ont besoin que le conteneur principal défile en cas de contenu débordant: lien vers codepen

Il y a une tonne de réponses maintenant, mais j'ai trouvé utile height: 100vh;de travailler sur l'élément div qui doit remplir tout l'espace vertical disponible.

De cette façon, je n'ai pas besoin de jouer avec l'affichage ou le positionnement. Cela s'est avéré utile lors de l'utilisation de Bootstrap pour créer un tableau de bord dans lequel j'avais une barre latérale et une principale. Je voulais que le principal s'étire et remplisse tout l'espace vertical afin que je puisse appliquer une couleur d'arrière-plan.

div {
    height: 100vh;
}

Prend en charge IE9 et plus: cliquez pour voir le lien

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

Dans tous les navigateurs sensés, vous pouvez placer le div "en-tête" avant le contenu, en tant que frère et sœur, et le même CSS fonctionnera. Cependant, IE7- n'interprète pas correctement la hauteur si le flottant est à 100% dans ce cas, donc l'en-tête doit être dans le contenu, comme ci-dessus. Le débordement: auto entraînera des barres de défilement doubles sur IE (qui a toujours la barre de défilement de la fenêtre visible, mais désactivée), mais sans cela, le contenu se coupera s'il déborde.

J'ai lutté avec cela pendant un certain temps et je me suis retrouvé avec ce qui suit:

Puisqu'il est facile de faire le contenu DIV de la même hauteur que le parent mais apparemment difficile de le faire la hauteur du parent moins la hauteur de l'en-tête, j'ai décidé de faire le contenu div pleine hauteur mais le positionner absolument dans le coin supérieur gauche et puis définir un rembourrage pour le haut qui a la hauteur de l'en-tête. De cette façon, le contenu s'affiche proprement sous l'en-tête et remplit tout l'espace restant:

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 vous ne parvenez pas à prendre en charge les anciens navigateurs (c'est-à-dire MSIE 9 ou plus ancien), vous pouvez le faire avec Flexible Box Layout Module qui est déjà W3C CR. Ce module permet également d'autres astuces intéressantes, telles que la réorganisation du contenu.

Malheureusement, MSIE 9 ou moins ne prend pas en charge cela et vous devez utiliser le préfixe du fournisseur pour la propriété CSS pour chaque navigateur autre que Firefox. Espérons que d'autres fournisseurs abandonneront bientôt le préfixe également.

Un autre choix serait la disposition de grille CSS, mais qui a encore moins de support des versions stables des navigateurs. En pratique, seul MSIE 10 le prend en charge.

Mise à jour de l'année 2020 : tous les navigateurs modernes prennent en charge à la fois display: flexet display: grid. Le seul manquant est le support pour subgridlequel n'est pris en charge que par Firefox. Notez que MSIE ne prend pas en charge non plus la spécification, mais si vous êtes prêt à ajouter des hacks CSS spécifiques à MSIE, il peut être fait pour se comporter. Je suggérerais simplement d'ignorer MSIE car même Microsoft dit qu'il ne devrait plus être utilisé.

Solution de grille CSS

Il suffit de définir les propriétés bodywith display:gridet grid-template-rowsusing autoet 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>

Un guide complet des grilles @ CSS-Tricks.com

Pourquoi pas comme ça?

html, body {
    height: 100%;
}

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

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

Vous donner une taille html et corps (dans cet ordre) et ensuite juste donner une hauteur à vos éléments?

Travaille pour moi

Vous pouvez réellement utiliser display: tablepour diviser la zone en deux éléments (en-tête et contenu), où l'en-tête peut varier en hauteur et le contenu remplit l'espace restant. Cela fonctionne avec la page entière, ainsi que lorsque la zone est simplement le contenu d'un autre élément positionné avec positiondéfini sur relative, absoluteou fixed. Cela fonctionnera tant que l'élément parent aura une hauteur non nulle.

Voir ce violon et aussi le code ci-dessous:

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"

résolu le problème pour moi. Dans mon cas, j'ai appliqué cela à la div requise

Vincent, je répondrai à nouveau en utilisant vos nouvelles exigences. Comme vous ne vous souciez pas du contenu caché s'il est trop long, vous n'avez pas besoin de faire flotter l'en-tête. Mettez simplement le débordement caché sur les balises html et body, et réglez la #contenthauteur à 100%. Le contenu sera toujours plus long que la fenêtre d'affichage par la hauteur de l'en-tête, mais il sera masqué et ne provoquera pas de barres de défilement.

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

Essaye ça

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

J'ai trouvé une solution assez simple, car pour moi, c'était juste un problème de conception. Je voulais que le reste de la page ne soit pas blanc sous le pied de page rouge. J'ai donc mis la couleur d'arrière-plan des pages en rouge. Et la couleur de fond du contenu au blanc. Avec la hauteur du contenu réglée par ex. 20em ou 50% une page presque vide ne laissera pas la page entière rouge.

J'ai eu le même problème mais je n'ai pas pu faire fonctionner la solution avec les flexbox ci-dessus. J'ai donc créé mon propre modèle, qui comprend:

• un en-tête avec un élément de taille fixe
• un pied de page
• une barre latérale avec une barre de défilement qui occupe la hauteur restante
• contenu

J'ai utilisé des boîtes flexibles mais de manière plus simple, en utilisant uniquement les propriétés display: flex et flex-direction: row | column :

J'utilise angulaire et je veux que la taille de mes composants soit à 100% de leur élément parent.

La clé est de définir la taille (en pourcentage) pour tous les parents afin de limiter leur taille. Dans l'exemple suivant, la hauteur myapp a 100% de la fenêtre d'affichage.

Le composant principal a 90% de la fenêtre, car l'en-tête et le pied de page en ont 5%.

J'ai posté mon modèle ici: 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>

Pour l'application mobile, j'utilise uniquement VH et 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;
}

Démo - https://jsfiddle.net/u763ck92/

Filer l'idée de M. Alien ...

Cela semble une solution plus propre que la boîte de flexion populaire pour les navigateurs compatibles CSS3.

Utilisez simplement min-height (au lieu de height) avec calc () pour le bloc de contenu.

Le calc () commence à 100% et soustrait les hauteurs des en-têtes et pieds de page (doit inclure des valeurs de remplissage)

L'utilisation de "min-height" au lieu de "height" est particulièrement utile pour pouvoir fonctionner avec du contenu rendu javascript et des frameworks JS comme Angular2. Sinon, le calcul ne poussera pas le pied de page vers le bas de la page une fois que le contenu rendu en javascript est visible.

Voici un exemple simple d'en-tête et de pied de page utilisant une hauteur de 50 pixels et un rembourrage de 20 pixels pour les deux.

Html:

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

Css:

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

Bien sûr, les calculs peuvent être simplifiés mais vous avez l'idée ...

Dans Bootstrap:

Styles CSS:

html, body {
    height: 100%;
}

1) Remplissez simplement la hauteur de l'espace d'écran restant:

<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) remplissez la hauteur de l'espace d'écran restant et alignez le contenu au milieu de l'élément parent:

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

Ceci est ma propre version minimale de la solution de Pebbl. Il a fallu une éternité pour trouver l'astuce pour le faire fonctionner dans IE11. (Également testé dans Chrome, Firefox, Edge et 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>