Modern way to markup 100% height layout in HTML5 and CSS3

Question

I\'ve been away from marking up sites for some time. So, now we have HTML5 and a lot of new features in CSS. I have a common site layout with fixed size header and footer. And o

Answer 1

Well, first of all in 2011 we dont use tables for layout anymore!

If I were you, I would write the markup like so:

   

        

            contains logo, nav and has fixed height
        
        
 /*use 
 or 
 if it is appropriate - if not sure what to use, use a div*/
            actual content
        
        

            fixed size footer
        
    

And the CSS would be the same except the changed selectors

html, body { height:100% }
#main { height:100% }
footer { height:123px }

For a fixed footer, I would suggest to use position:absolute or maybe position:fixed - it depends how you want it to behave (scroll with page or always stay at bottom).

To make a "sticky" footer, that will be at the bottom of the page but move with the content, this method will do the trick.