title: Modern way to markup 100% height layout in HTML5 and CSS3
body: <p>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:</p>
  
  <pre><code>&lt;body&gt;
     &lt;table id="main" ...&gt;
        &lt;tr&gt;
           &lt;td id="header-and-content"&gt;
              &lt;div id="header"&gt;contains logo, nav and has fixed height&lt;/div&gt;
              &lt;div id="content"&gt;actual content&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td id="footer"&gt;
             fixed size footer
           &lt;/td&gt;
        &lt;/tr&gt;
     &lt;/table&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And accompanying css:</p>
  
  <pre><code>html, body { height:100% }
  table#main { height:100% }
  td#footer { height:123px }
  </code></pre>
  
  <p>So, it's obsolete. You, who keeps abreast of new markup techniques, how it is done by now in 2011? </p>
  
  <p><strong>UPD</strong> 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)</p>
  
  <p><strong>SOME SUMMARY UPDATE</strong></p>
  
  <ol>
  <li>I've tried method with usage of display:table and display:table-row and it works: <a href="http://jsfiddle.net/AHh2a/" rel="noreferrer">little content</a>, <a href="http://jsfiddle.net/AHh2a/1/" rel="noreferrer">more content</a></li>
  <li>Method <a href="http://ryanfait.com/resources/footer-stick-to-bottom-of-page/" rel="noreferrer">Make the Footer Stick to the Bottom of a Page</a> was adviced by Andrej. It works also: <a href="http://jsfiddle.net/WcU6u/" rel="noreferrer">little content</a>, <a href="http://jsfiddle.net/WcU6u/1/" rel="noreferrer">more content</a></li>
  </ol>
  
  <p>Some disappointment though I feel: first method is just those tables but without <code>table</code> tag. The second is really old, I've avoided to use it because it resembles hack. My god, nothing new :)</p>