0
Ich habe die folgenden Links ... aber es macht mir immer noch nicht helfen ...Flexbox 100% Höhe Ausgabe
how to make nested flexboxes work
Height 100% on flexbox column child
How to make flexbox children 100% height of their parent?
ich eine ganze Seite benötigen, das ist reagieren, wie das folgende Bild: 
Mit Kopf- und Fußzeile und die mittleren 5 Spalten füllen die Höhe gleichmäßig in den verbleibenden Raum, und wenn ich dann Medienabfragen, füllen Sie den Bildschirm des mobilen Geräts wie folgt:
Hier ist der Code, den ich bisher habe ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}
.yellow-back {
background: #ffe001;
}
.red-back {
background: #e31e25;
}
.green-back {
background: #66af45;
}
.purple-back {
background: #954294;
}
.containerFull { position: relative; width: 100%; margin: 0 auto; padding: 0;}
.containerFull .column,
.containerFull .columns { float: left; display: inline; margin-left: 0px; margin-right: 0px; }
.containerFull .one-fifth.column { width: 20%; }
</style>
</head>
<body>
<div class="box">
<div class="row header">
<p><b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<div class="containerFull">
<div class="one-fifth column green-back">Here</div>
<div class="one-fifth column red-back">Here</div>
<div class="one-fifth column">Here</div>
<div class="one-fifth column yellow-back">Here</div>
<div class="one-fifth column purple-back">Here</div>
</div><!-- ContainerFull -->
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>
</body>
</html>
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}
.yellow-back {
background: #ffe001;
}
.red-back {
background: #e31e25;
}
.green-back {
background: #66af45;
}
.purple-back {
background: #954294;
}
.containerFull {
position: relative;
width: 100%;
margin: 0 auto;
padding: 0;
}
.containerFull .column,
.containerFull .columns {
float: left;
display: inline;
margin-left: 0px;
margin-right: 0px;
}
.containerFull .one-fifth.column {
width: 20%;
}<div class="box">
<div class="row header">
<p><b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<div class="containerFull">
<div class="one-fifth column green-back">Here</div>
<div class="one-fifth column red-back">Here</div>
<div class="one-fifth column">Here</div>
<div class="one-fifth column yellow-back">Here</div>
<div class="one-fifth column purple-back">Here</div>
</div>
<!-- ContainerFull -->
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>
ich hinzufügen, vergessen, dass ich das Hintergrundbild oder Farbe wünschen den Raum zu füllen ... Vielen Dank! –
Vielleicht könnte dieser Beitrag Ihnen helfen. [Der Inhalt in div füllt den verfügbaren Platz nicht, ohne die Höhe anzugeben] (http://stackoverflow.com/questions/43922077/content-within-div-wont-fill-available-space-without-specifying-height/43922584#43922584), Stellen Sie sicher, dass Sie Ihre Körpergröße auf 100vh einstellen, dann ist es einfacher, den Rest Ihrer Inhaltshöhe einzustellen. Verwenden Sie auch eine CSS-Reset-Datei, um seltsame Verhaltensweisen zu vermeiden. –