Jak utworzyć div, aby wypełnić całą przestrzeń między div nagłówka i stopki

Pracuję nad przejściem od używania tabel do celów layoutu do używania div (tak, tak wielka debata). Mam 3 divy, nagłówek, treść i stopkę. Nagłówek i stopka mają po 50px. Jak uzyskać div stopki, aby pozostać na dole strony, a div zawartości, aby wypełnić przestrzeń pomiędzy? Nie chcę twardego kodowania wysokości divs zawartości, ponieważ rozdzielczość ekranu może się zmienić.

Author: Brian Tompsett - 汤莱恩, 2008-10-16
Source

6 answers

Rozwiązanie Flexbox]}

Używając układu flex możemy to osiągnąć, pozwalając na naturalną wysokość nagłówka i stopki. Zarówno nagłówek, jak i stopka przykleją się odpowiednio do górnej i dolnej części widoku (podobnie jak natywna aplikacja mobilna), a główny obszar zawartości wypełni pozostałą przestrzeń, podczas gdy wszelkie pionowe przelewy będą przewijane w tym obszarze.

Zobacz 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;
}
 19
Author: Reggie Pinkham,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-19 20:27:07

Podsumowując (a to pochodzi z CSS Sticky Footer linku dostarczonego przez Traingamer), użyłem tego: 

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
Author: Jeremy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-16 23:25:54

Aby rozszerzyć odpowiedź sprzedawcy, podaj swój content div height: 100% i podaj marżę auto.

Pełne wyjaśnienie i przykład można znaleźć w CSS Sticky Footer autorstwa Ryana Faita.

Ponieważ znasz rozmiar (wysokość) nagłówka, umieść go wewnątrz content div (lub użyj marginesów).

Position absolute spowoduje problemy, jeśli zawartość jest większa (wyższa) niż okno.

 8
Author: Traingamer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-16 17:14:40

Sposób, aby to zrobić za pomocą siatki CSS:

Indeks.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%;
}
 0
Author: Allen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-03 06:16:39

Jeśli próbujesz zmaksymalizować wysokość swojej zawartości div, w CSS dodaj

Height: 100%;

 -3
Author: Mitchel Sellers,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-15 22:02:27 
#footer {
 clear: both;
}
 -9
Author: Andy Brudtkuhl,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-16 17:25:46