CSS Flex

by balefrost

HTML

<!DOCTYPE html>
<html lang="en">
<body>
 <header>header</header>
 <div id='main'>
     content
     <div id='table'>table</div>
 </div>
 <footer>footer</footer>
</body>
</html>

CSS

html {
    height: 100%;
}

body {
    height: 100%;
    font: 24px Helvetica;
    background: #999999;
    display: -webkit-flex;
    display:    -moz-flex;
    display:         flex;
    -webkit-flex-flow: column;
       -moz-flex-flow: column;
            flex-flow: column;
}
 
#main {
    margin: 4px;
    padding: 5px;
    background: #bbeeff;
    display: -webkit-flex;
    display:    -moz-flex;
    display:         flex;
    -webkit-flex-flow: column;
       -moz-flex-flow: column;
            flex-flow: column;
    -webkit-flex: 1 1;
       -moz-flex: 1 1;
            flex: 1 1;
}

#table {
    min-height: 100px;
    background: #bbffee;
    -webkit-flex: 1 1;
       -moz-flex: 1 1;
            flex: 1 1;
}
  
header, footer {
    display: block;
    margin: 4px;
    padding: 5px;
    min-height: 50px;
    background: #ffeebb;
    -webkit-flex: 0 0;
       -moz-flex: 0 0;
            flex: 0 0;
}