3 Reihen, 100% Höhe Layout, mit Flexbox

Question

Ich würde gerne wissen: ist es möglich, ein 3-Zeilen-Layout, 100% Höhe, mit Flexbox zu bauen?

<header> The header content goes here. </header> 
<div class="content"> The main content goes here. </div> 
<footer> The footer content goes here. </footer> 

fester Höhe Kopf- und Fußzeilen, während der Inhalt der flüssige Teil.

Ich meine, so etwas wie dieses, aber ohne absolute Positionierung:

* { 
 
    margin: 0; 
 
} 
 
header { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 64px; 
 
    top: 0; 
 
    background: red; 
 
} 
 
footer { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 64px; 
 
    bottom: 0; 
 
    background: green; 
 
} 
 
.content { 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 64px; 
 
    bottom: 64px; 
 
    background: blue; 
 
}

<header>The header content goes here.</header> 
 

 
<div class="content">The main content goes here.</div> 
 

 
<footer>The footer content goes here.</footer>

http://jsfiddle.net/BMxzn/

Answer 1

Ich füge meine eigene akzeptierte Antwort hier hinzu, weil sie auch andere Probleme anspricht.

Ich bemerkte, dass der normalerweise vorgeschlagene Code ein Problem mit Android vor 4.4.4 hat. Durch die bessere indagating > this und > this Ich fand heraus, dass das Problem > this, auch wenn Android nicht auf der betroffenen Browsern Liste erwähnt. So, das war meine Lösung Flexschrumpf hinzuzufügen: 0 auf den Inhalt:

body{ 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
} 

.main-content{ 
    flex: 1 0 auto; // flex-shrink:0 > android 4.4.2 fix (and some other browsers too) 
} 

Es ist auch gut, eine Art von flex Eigenschaft zuweisen Kopf- und Fußzeile. Ich bemerkte auf Android 442, die sonst die bg Farbe verschwunden war:

.main-header, 
.main-footer{ 
    flex: none; // or flex something. 
} 

Bitte beachten Sie auch, dass ich Autoprefixer bin mit. Andernfalls sollten Sie nicht die Verknüpfung auf dem Haupt-Inhalte (IE Scheiße-fix):

.main-content{ 
    flex-grow: 1; 
    flex-shrink:0; 
    flex-basis:auto; 
} 

Answer 2

body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
} 
 
.content { 
 
    flex: 1;  /* this is the key; consumes all available height */ 
 
    background: blue; 
 
} 
 
header { 
 
    height: 64px; 
 
    background: red; 
 
} 
 
footer { 
 
    height: 64px; 
 
    background: green; 
 
} 
 
* { 
 
    margin: 0; 
 
}

<header>The header content goes here.</header> 
 
<div class="content">The main content goes here.</div> 
 
<footer>The footer content goes here.</footer>

Answer 3

Sehr ähnlich diese Frage: this & this

Sie brauchen nur 3 Zeilen Code:

display:flex; 
flex-flow:column; 
height:/* whatever height needed */ 

und dann flex:1; an dem Behälter, die verbleibenden Raum zu füllen braucht

* { 
 
    margin: 0; 
 
} 
 
body { 
 
    display: flex; 
 
    flex-flow: column; 
 
    height: 100vh;/* if you relay on flex, then vh is also understood */ 
 
} 
 
body>* { 
 
    padding: 1em; 
 
} 
 
header { 
 
    background: red; 
 
} 
 
footer { 
 
    background: green; 
 
} 
 
.content { 
 
    flex: 1; 
 
    background: blue; 
 
    color: white; 
 
    /* optionnal if you want to keep footer at screen 
 
    overflow:auto; */ 
 
}

<header>The header <b>of any height</b> content goes here.</header> 
 

 
<div class="content">The main content goes here.</div> 
 

 
<footer>The footer <b>of any height</b> content goes here.</footer>

Es müssen keine Höhen für Fußzeile oder Kopfzeile festgelegt werden, aber Sie können overflow:auto zum Hauptcontainer hinzufügen.