Come creare div per riempire tutto lo spazio tra div dell'intestazione e piè di pagina

https://stackoverflow.com/questions/206652

03-07-2019
|

Domanda

Sto lavorando per passare dall'uso delle tabelle ai fini del layout all'utilizzo dei div (sì, sì, il grande dibattito). Ho 3 div, un'intestazione, un contenuto e un piè di pagina. L'intestazione e il piè di pagina sono 50 px ciascuno. Come posso fare in modo che il div footer rimanga nella parte inferiore della pagina e il div del contenuto per riempire lo spazio in mezzo? Non voglio codificare in altezza l'altezza dei contenuti div perché la risoluzione dello schermo può cambiare.

Soluzione

Soluzione Flexbox

Usando il layout flessibile possiamo raggiungere questo obiettivo, consentendo intestazione e piè di pagina naturali dell'altezza. Sia l'intestazione che il piè di pagina rimarranno rispettivamente nella parte superiore e inferiore della finestra (molto simile a un'app mobile nativa) e l'area di contenuto principale riempirà lo spazio rimanente, mentre qualsiasi overflow verticale sarà scorrevole all'interno di quell'area.

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

Altri suggerimenti

Per riassumere (e questo è venuto dal CSS Sticky Footer link fornito da Traingamer), questo è quello che ho usato:

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>

Per espandere la risposta dei venditori di Mitchel, dai il tuo div altezza dei contenuti: 100% e dai un margine automatico.

Per una spiegazione e un esempio completi, vedere CSS Sticky Footer di Ryan Fait .

Dato che conosci la dimensione (altezza) dell'intestazione, inseriscila nel div del contenuto (o usa i margini).

La posizione assoluta ti darà problemi se il tuo contenuto è più grande (più alto) della finestra.

Un modo per farlo usando la griglia CSS:

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

se stai cercando di massimizzare l'altezza del div del tuo contenuto, nel CSS aggiungi

altezza: 100%;

#footer {
 clear: both;
}

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow