Wie div schaffen den ganzen Raum zwischen Kopf- und Fußzeile div zu füllen

StackOverflow https://stackoverflow.com/questions/206652

  •  03-07-2019
  •  | 
  •  

Frage

Ich arbeite aus Verwendung von Tabellen zu Layoutzwecken über den Beginn mit divs (ja, ja der großen Debatte). Ich habe 3 divs bekam, einen Header, Inhalt und Fußzeile. Die Kopf- und Fußzeile sind 50px je. Wie erhalte ich die Fußzeile div am unteren Rand der Seite zu bleiben, und den Inhalt div den Raum dazwischen zu füllen? Ich will nicht zu hart Code der Inhalt divs Höhe, da die Bildschirmauflösung ändern kann.

War es hilfreich?

Lösung

Flexbox Lösung

flex Layout verwenden können wir dies erreichen, während für natürliche Höhe Kopf- und Fußzeilen zu ermöglichen. Sowohl die Kopf- und Fußzeile werden halten Sie sich an die Ober- und Unterseite des Darstellungs jeweils (ähnlich wie eine native mobile app) und der Hauptinhaltsbereich wird den verbleibenden Raum füllen, während jeder vertikaler Überlauf wird in diesem Bereich scrollbaren sein.

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

Andere Tipps

Um zusammenzufassen (und das kam aus dem CSS Sticky Footer Link durch Traingamer zur Verfügung gestellt), das ist, was ich verwenden: 

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>

Um auf Mitchel Sellers erweitern zu beantworten, geben Sie Ihre Inhalte div. Höhe: 100% und geben ihm eine Auto Marge

Für eine vollständige Erklärung und Beispiel siehe Ryan Fait CSS Sticky Footer .

Da Sie die Größe (Höhe) des Kopfes wissen, legt es in dem Inhalt div (oder verwenden Sie Ränder).

Position absolute werden Ihnen Probleme geben, wenn Ihr Gehalt größer (höher) als das Fenster.

Eine Möglichkeit, diese mit CSS Grid zu tun:

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

Wenn Sie versuchen, die Höhe des Inhalts div zu maximieren, in dem CSS-add

height: 100%; 

#footer {
 clear: both;
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top