Div mit CSS auf die verbleibende Höhe setzen, mit Divs unbekannter Höhe darüber und darunter

Question

Ist es möglich, den Wrapper füllen die Fensterhöhe (kein Scrollen) und die Mitte div scrollable ohne Durcheinander mit Pixeln und Javascript zu machen?

<div id="wrapper">
  <h1>Header</h1>
  <div id="center">
    <div style="height:1000px">high content</div>
  </div>
  <div id="footer">Footer</div>
</div>

Grundsätzlich möchte ich, dass die Kopfzeile oben sichtbar ist und die Fußzeile immer unten sichtbar ist und einen scrollbaren Inhalt in der Mitte hat, der die restliche Höhe einnimmt.
Die Höhen der Header-, Footer- und Center-Divs sind alle unbekannt (keine festgelegten px oder %, d.h. variable Schriftgröße oder Padding). Ist das mit reinem CSS möglich?

Answer 1

2014 UPDATE : Die moderne Art, dieses Problem zu lösen, besteht darin, dass verwenden Sie die flexbox CSS-Modell . Sie wird von allen gängigen Browsern und IE11+ unterstützt.

---

2012: Der richtige Weg, dies mit CSS allein zu tun, ist die Verwendung von display: table y display: table-row . Diese sind unterstützt von allen wichtigen Browsern , beginnend mit IE8. Dies ist no Verwendung von Tabellen für die Anzeige. Sie werden divs verwenden:

html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: table;
    height: 100%;
    width: 100%;
    background: yellow;  /* just to make sure nothing bleeds */
}
.header {
    display: table-row;
    background: gray;
}
.content {
    display: table-row;  /* height is dynamic, and will expand... */
    height: 100%;        /* ...as content is added (won't scroll) */
    background: turquoise;
}
.footer {
    display: table-row;
    background: lightgray;
}

<div class="wrapper">
    <div class="header">
        <h1>Header</h1>
        <p>Header of variable height</p>
    </div>
    <div class="content">
        <h2>Content that expands in height dynamically to adjust for new content</h2>
        Content height will initially be the remaining
        height in its container (<code>.wrapper</code>).
        <!-- p style="font-size: 4000%">Tall content</p -->
    </div>
    <div class="footer">
        <h3>Sticky footer</h3>
        <p>Footer of variable height</p>
    </div>
</div>

Das war's. Die Divs sind umbrochen, wie Sie erwarten.

Answer 2

Eine browserübergreifende Lösung, die von Dan Dascalescu Antwort:

http://jsfiddle.net/Uc9E2

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
.l-fit-height {
    display: table;
    height: 100%;
}
.l-fit-height-row {
    display: table-row;
    height: 1px;
}
.l-fit-height-row-content {
    /* Firefox requires this */
    display: table-cell;
}
.l-fit-height-row-expanded {
    height: 100%;
    display: table-row;
}
.l-fit-height-row-expanded > .l-fit-height-row-content {
    height: 100%;
    width: 100%;
}
@-moz-document url-prefix() {
    .l-scroll {
        /* Firefox requires this to do the absolute positioning correctly */
        display: inline-block;
    }
}
.l-scroll {
    overflow-y: auto;
    position: relative;
    height: 1000px;
}
.l-scroll-content {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 1000px;
    min-height:100px;
}

<div class="l-fit-height">
    <section class="l-fit-height-row">
        <div class="l-fit-height-row-content">
            <p>Header</p>
        </div>
    </section>
    <section class="l-fit-height-row-expanded">
        <div class="l-fit-height-row-content l-scroll">
            <div class="l-scroll-content">
                <p>Foo</p>
            </div>
        </div>
    </section>
    <section class="l-fit-height-row">
        <div class="l-fit-height-row-content">
            <p>Footer</p>
        </div>
    </section>
</div>

Answer 3

Verwendung von overflow:auto können Sie dies tun.

Demo

Answer 4

Was Sie also meinen, ist eine klebrige Fußzeile. Ich habe noch mehr recherchiert und hier ist, was ich für Sie habe.

<div id="wrapper" style="height:100%">
<div id="header" style="float:none;"><h1>Header</h1></div>

<div style="overflow:scroll;float:none;height:auto;">high content</div>

<div id="footer" style="clear:both;position:fixed;bottom:0px;"><h1>Footer</h1></div>
</div>

Dadurch erhalten Sie eine klebrige Fußzeile. Der Schlüssel ist position:fixed und bottom:0px; Leider bedeutet dies, dass die Fußzeile auch über dem Inhalt in der Bildlaufansicht schwebt. Bisher scheint es nur Javascript zu sein, dies herauszufinden, aber ich werde weiter suchen.