Comment créer div pour remplir tout l'espace entre l'en-tête et le pied de page div

https://stackoverflow.com/questions/206652

03-07-2019
|

Question

Je suis en train de passer de l'utilisation de tableaux à des fins de mise en page à l'utilisation de divs (oui, oui, le grand débat). J'ai 3 divs, un en-tête, le contenu et le pied de page. L'en-tête et le pied de page ont une taille de 50 pixels chacun. Comment faire en sorte que la division de bas de page reste en bas de la page et la division de contenu pour remplir l'espace entre les deux? Je ne veux pas coder en dur la hauteur des divisions du contenu car la résolution de l'écran peut changer.

La solution

Solution Flexbox

En utilisant une disposition flexible, nous pouvons y parvenir tout en permettant un en-tête et un pied de page d'une hauteur naturelle. L'en-tête et le pied de page vont coller respectivement au haut et au bas de la fenêtre (un peu comme une application mobile native) et la zone de contenu principale remplit l'espace restant, tandis que les débordements verticaux défilent dans cette zone.

Voir JS Fiddle

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

CSS

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

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

header,
footer {
  flex: none;
}

main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}

Autres conseils

Pour résumer (et cela provient du CSS Sticky Footer

html, body 
{ 
    height: 100%; 
} 

#divHeader
{
    height: 100px;
}

#divContent
{
    min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
    height: 100%; 
    margin: 0 auto -100px; /*Allow for footer height*/
    vertical-align:bottom;
}

#divFooter, #divPush
{
    height: 100px; /*Push must be same height as Footer */
}

<div id="divContent">
    <div id="divHeader">
        Header
    </div>

    Content Text

    <div id="divPush"></div>
</div>
<div id="divFooter">
    Footer
</div>

Pour développer la réponse de Mitchel Sellers, attribuez à votre contenu une hauteur de div de 100%, ainsi qu'une marge automatique.

Pour une explication complète et des exemples, voir le CSS Sticky Footer de Ryan Fait .

Puisque vous connaissez la taille (hauteur) de votre en-tête, placez-le dans la div de contenu (ou utilisez des marges).

La position absolue vous posera des problèmes si votre contenu est plus grand (plus haut) que la fenêtre.

Une façon de faire cela en utilisant CSS Grid:

index.html

<html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="main.css" rel="stylesheet">
  </head>
  <body>
    <main>
      <header>Header</header>
      <section>Content</section>
      <footer>Footer</footer>
    </main>
  </body>
</html>

main.css

body {
    margin: 0;
}
main {
    height: 100%;
    display: grid;
    grid-template-rows: 100px auto 100px;
}
section {
    height: 100%;
}

si vous essayez de maximiser la hauteur de votre contenu, dans l’ajout CSS

hauteur: 100%;

#footer {
 clear: both;
}

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow