css - Basic Flex Layout - Footer/Content? -

i trying basic layout content , footer flex.

i need content fill whatever left on , footer 60px tall. best way go this?

<div class="container"> // 100% height   <div class="one"></div> // fill rest of height   <div class="two"></div> // 60px tall </div> 

here base jdfiddle: http://jsfiddle.net/vkd4v6lt/1/

let me thank providing base jsfiddle!
modified it want.

breakdown

body {     margin: 0;     padding: 0; } 

first remove margin , padding body because allow .container fill complete viewport.

.container {     min-height: 100vh; } 

make .container @ least big viewport fill completely.

.one {     flex: 1; } 

fill remaining space in flexbox element, .two has set height of 60px.

as pointed out bram vanroy can use calc (and other methods) if footer has set height. works if don't explicitly set footer height , let footer take height needs , stretch content container accommodate that.