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

Technically you could probably still get away with laying out your page with table tags but it is now considered bad practice. It is considered good practice to use "semantic" web markup which means using tags for their intended purposes so a table tag should be used to represent table data and not invisible design. DIVs are intended for use designing your invisible page layout. A list apart is a great website resource for understanding these concepts.

This article is good for understanding semantic markup: http://www.alistapart.com/articles/12lessonsCSSandstandards

So all that said, here is a sample page that does what you want:

http://peterned.home.xs4all.nl/examples/csslayout1.html