How to make this Header/Content/Footer layout using CSS?

Question

 ______________________
|        Header        |
|______________________|
|                      |
|                      |
|        Content       |
|                        


        

Answer 1

Using flexbox, this is easy to achieve.

Set the wrapper containing your 3 compartments to display: flex; and give it a height of 100% or 100vh. The height of the wrapper will fill the entire height, and the display: flex; will cause all children of this wrapper which has the appropriate flex-properties (for example flex:1;) to be controlled with the flexbox-magic.

Example markup:

    
I'm a 30px tall header
    
I'm the main-content filling the void!
    
I'm a 30px tall footer

And CSS to accompany it:

.wrapper {
    height: 100vh;
    display: flex;

    /* Direction of the items, can be row or column */
    flex-direction: column;
}

header,
footer {
    height: 30px;
}

main {
    flex: 1;
}

Here's that code live on Codepen: http://codepen.io/enjikaka/pen/zxdYjX/left

You can see more flexbox-magic here: http://philipwalton.github.io/solved-by-flexbox/

Or find a well made documentation here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

--[Old answer below]--

Here you go: http://jsfiddle.net/pKvxN/

  

    
I am a header
  
  

    

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula dolor.
    
  
  

    
I am a footer
  

That works on all modern browsers (FF4+, Chrome, Safari, IE8 and IE9+)