HTML
<div class="f-root">
<div class="f-node header">
Header
</div>
<div class="f-node main f-1">
<div class="main-content f-1 main-grid">
<div class="section-row">
<div class="block-content f-1">
Content
<br /><br />
Emulates height 100% with a horizontal flexbox with stretch
<br /><br />
This box with a border should fill the blue area except for the padding (just to show the middle flexbox item).
Content
<br /><br />
Emulates height 100% with a horizontal flexbox with stretch
<br /><br />
This box with a border should fill the blue area except for the padding (just to show the middle flexbox item).
Content
<br /><br />
Emulates height 100% with a horizontal flexbox with stretch
<br /><br />
This box with a border should fill the blue area except for the padding (just to show the middle flexbox item).
Content
<br /><br />
Emulates height 100% with a horizontal flexbox with stretch
<br /><br />
This box with a border should fill the blue area except for the padding (just to show the middle flexbox item).
Content
<br /><br />
Emulates height 100% with a horizontal flexbox with stretch
<br /><br />
This box with a border should fill the blue area except for the padding (just to show the middle flexbox item).
<br /><br />
<br /><br />
</div>
<div class="block-content-2 f-1">
asd
</div>
</div>
<div class="section-row">
<div class="block-content-2 f-1">
Content
<br /><br />
Emulates height 100% with a horizontal flexbox with stretch
<br /><br />
This box with a border should fill the blue area except for the padding (just to show the middle flexbox item).
</div>
<div class="block-content f-1">
asd
</div>
</div>
</div>
</div>
<div class="f-node footer">
Footer
</div>
</div>
CSS
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #444444;
color: #cccccc;
font-size: 14px;
/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.f-root {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
background: rgba(255, 255, 255, .1);
}
.f-node {
padding: 8px;
}
.f-1 {
flex: 1; /* same as flex: 1 1 auto; */
}
.f-node.header {
background: rgba(255, 0, 0, .1);
}
.f-node.footer {
background: rgba(0, 255, 0, .1);
}
.f-node.main {
background: rgba(0, 0, 255, .1);
display: flex;
flex-direction: row;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
/* Needed for when the area gets squished too far and there is content that can't be displayed */
overflow: auto;
}
.main-content
{
background: rgba(0, 0, 0, .3);
border: 1px solid #000000;
flex-direction: column;
align-self: start;
}
.section-row {
display: flex;
}
.block-content {
background: salmon;
}
.block-content-2 {
background: lightgreen;
}
