In einem 3-reihigen Layout:
- Die obere Reihe sollte entsprechend ihrem Inhalt dimensioniert sein
- Die untere Reihe sollte eine feste Höhe in Pixel haben
- Die mittlere Reihe sollte erweitert werden, um den Behälter zu füllen
Das Problem ist, dass beim Erweitern des Hauptinhalts die Kopf- und Fußzeilen zerkleinert werden:
HTML:
<section>
<header>
header: sized to content
<br>(but is it really?)
</header>
<div>
main content: fills remaining space<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
<!-- uncomment to see it break - ->
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
<!-- -->
</div>
<footer>
footer: fixed height in px
</footer>
</section>
CSS:
section {
display: flex;
flex-flow: column;
align-items: stretch;
height: 300px;
}
header {
flex: 0 1 auto;
background: tomato;
}
div {
flex: 1 1 auto;
background: gold;
overflow: auto;
}
footer {
flex: 0 1 60px;
background: lightgreen;
/* fixes the footer: min-height: 60px; */
}
Geige:
- http://jsfiddle.net/7yLFL/1/ (funktioniert, mit kleinen Inhalten)
- http://jsfiddle.net/7yLFL/ (kaputt, mit größerem Inhalt)
Ich bin in der glücklichen Situation, dass ich das neueste und beste CSS verwenden kann, ohne auf ältere Browser zu achten. Ich dachte, ich könnte das Flex-Layout verwenden, um die alten tabellenbasierten Layouts endlich loszuwerden. Aus irgendeinem Grund macht es nicht das, was ich will ...
Für die Aufzeichnung gibt es viele verwandte Fragen zu SO über "Füllen der verbleibenden Höhe", aber nichts, was das Problem löst, das ich mit Flex habe. Refs:
- Lassen Sie ein Div die Höhe des verbleibenden Bildschirmbereichs ausfüllen
- Füllen Sie den verbleibenden vertikalen Raum aus - nur CSS
- Haben Sie ein Div, um die verbleibende Höhe / Breite eines Containers auszufüllen, wenn Sie es mit einem anderen Div teilen?
- Verschachtelte Div-Dehnung auf 100% der verbleibenden Container-Div-Höhe ausdehnen
- Wie kann ich dafür sorgen, dass mein Flexbox-Layout 100% vertikalen Platz einnimmt?
- etc
Antworten:
Machen Sie es einfach: DEMO
Vollbildversion
quelle
flex: 1
habeflex-grow: 1
. Danke für die Lösung!Das folgende Beispiel enthält das Bildlaufverhalten, wenn der Inhalt der erweiterten Mittelkomponente über seine Grenzen hinausgeht. Außerdem nimmt die mittlere Komponente 100% des verbleibenden Speicherplatzes im Ansichtsfenster ein.
jsfiddle hier
Beispiel für HTML, mit dem dieses Verhalten demonstriert werden kann
quelle
html
von dem Selektor und appylingheight: 100vh
zubody
speziell: jsfiddle.net/pm6nqcqh/1Ein moderner Ansatz wäre die Verwendung der Rastereigenschaft.
quelle
Verwenden Sie die
flex-grow
Eigenschaft für den Hauptinhalt div und geben Sie diedispaly: flex;
an das übergeordnete Element weiter.quelle
section
Höhe nicht festgelegt ist?) Als zu verwendenposition: absolute
?position: absolute;
. https://jsfiddle.net/xa26brzf/