web-dev-qa-db-fra.com

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

Je travaille à 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, un contenu et un pied de page. L'en-tête et le pied de page font chacun 50 pixels. Comment faire pour que le div de pied de page reste en bas de la page et le div de contenu pour remplir l'espace entre les deux? Je ne veux pas coder en dur la hauteur des divs du contenu car la résolution de l'écran peut changer.

csshtml-table
54
Jeremy

Solution Flexbox

En utilisant une disposition flexible, nous pouvons y parvenir tout en permettant un en-tête et un pied de page de hauteur naturelle. L'en-tête et le pied de page resteront respectivement en haut et en bas de la fenêtre d'affichage (un peu comme une application mobile native) et la zone de contenu principale remplira l'espace restant, tandis que tout débordement vertical pourra défiler 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;
}
29
Reggie Pinkham

Pour résumer (et cela vient du lien CSS Sticky Footer fourni par Traingamer), voici ce que j'ai utilisé:

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

Pour développer la réponse de Mitchel Sellers, donnez à votre contenu une hauteur de div de 100% et donnez-lui une marge automatique.

Pour une explication complète et un exemple, voir Ryan Fait's CSS Sticky Footer .

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

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

8
Traingamer

Une façon de le faire 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%;
}
1
Allen