dmitry dmitry - 1 year ago 103
CSS Question

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

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 of course main content area in between. By default page should take 100% of window height (i.e. content area expands). And if content is long page vertical scrollbar appears and all like usual.
Usually I used to do it by something like this:

<table id="main" ...>
<td id="header-and-content">
<div id="header">contains logo, nav and has fixed height</div>
<div id="content">actual content</div>
<td id="footer">
fixed size footer

And accompanying css:

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

So, it's obsolete. You, who keeps abreast of new markup techniques, how it is done by now in 2011?

UPD People, issue not about semantic markup or using divs. I know what it does mean. Issue now in - how do I tell footer to stay at bottom even while content is empty or short. When content is long enough footer just go down as it would do in other case. Absolute and fixed is not the solution (at least at its basic form)


  1. I've tried method with usage of display:table and display:table-row and it works: little content, more content

  2. Method Make the Footer Stick to the Bottom of a Page was adviced by Andrej. It works also: little content, more content

Some disappointment though I feel: first method is just those tables but without
tag. The second is really old, I've avoided to use it because it resembles hack. My god, nothing new :)

Answer Source

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

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

   <div id="main" role="main">
            contains logo, nav and has fixed height
        <div class="content"> /*use <article> or <section> 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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download