Inhalt mit 100% zwischen Kopf-und Fußzeile

Vermuten lässt habe ich das folgende layout (siehe Bild unten)... ich habe einen header (A) an der Spitze, Fußzeile (C), immer an der Unterseite und container (B), die in der Mitte und füllen den Raum zwischen der Kopf-und Fußzeile von 100%.

Inhalt mit 100% zwischen Kopf-und Fußzeile

Denken kann nicht von irgendeiner Weise, wie Sie diese erreichen mit reinem css. Irgendwelche Ideen würde geschätzt!

InformationsquelleAutor King Julien | 2012-07-06

  1. 4

    Je nachdem, wie Ihre Seite aufgebaut ist, es kann funktionieren, wenn Sie height: 100%; für (B) und position: absolute; für das container-element. Hier ist ein Beispiel:

    HTML:

    <div id="container">
    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>
</div>​

    CSS:

    #container {
    height: 100%;
    width: 100%;
    background: green;
    position: absolute;
}
#header, #footer {
    height: 100px;
    width: 100%;
    background: red;
}
#body {
    height: 100%;
    width: 100%;
    background: blue;
}​

    jsFiddle

    InformationsquelleAutor

  2. 12

    Deine Frage ziemlich genau beschreibt, wie die standard-block-level-Elemente wie DIVs, Verhalten. Die center-div wird immer bis 100% der Raum zwischen den beiden, und es wird wachsen, basierend auf der inneren Inhalt.

    Sagte, ich nehme an, Sie wollen eine FESTE Fußzeile - eine, die bleibt, positioniert am unteren Rand des browser-Fensters. Dies ist achiavable mit einer Reihe von Techniken, eine davon ist mit absolut-Positionierung:

    <div id="header">Header</div> 
<div id="content">Main Content</div> 
<div id="footer">Footer</div>

    Stil:

    #header, #footer, #content { position: absolute; left: 0; width: 100%; }
#header, #footer { overflow: hidden; background: #444; height: 100px; }
#header { top: 0; }
#content { top: 100px; bottom: 100px; overflow: auto; background: #CCC; }
#footer { bottom: 0; }​

    http://jsfiddle.net/U9wfy/

    Nach Stunden Googeln, das war das einzige, was erreicht, was ich wollte. Danke!!!

    InformationsquelleAutor

  3. 0

    Kam ich über diese Frage und dachte, dass eine "moderne" Antwort wäre hilfreich. Dieses layout ist einfach mit flexbox..

    https://www.codeply.com/go/1QgRb4uFmj

    <header>
</header>
<main></main>
<footer>
</footer>

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

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

header,
footer {
  flex: none;
  background: #ddd;
}

main {
  overflow-y: scroll;
  flex: auto;
}

    InformationsquelleAutor

Schreibe einen Kommentar