CSS Three Column Liquid Layout with 100% Height Divs

      <?xml version="1.0" encoding="UTF-8"?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
          "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
        <head>
          <title>Three Column Liquid Layout 100% Height Divs</title>
      <style type="text/css" media="screen">
      body {
      margin:0;
      padding:0;
      font:12px georgia, "Book Antiqua", palatino, serif;
      color:#000;
      background:#fff;
      height:100%; /* this is the key! */
      }
      h1 {
      font-size:24px;
      font-family: helvetica, arial, sans-serif;
      font-weight: bold;
      color: #699;
      background-color: transparent;
      margin:20px 0;
      }
      a{
      text-decoration:underline;
      font-weight:bold;
      }
      a:link{
      color:#699;
      background-color: transparent;
      }
      a:visited{
      color:#699;
      background-color: transparent;
      }
      a:active{
      color:#000;
      background-color: transparent;
      }
      a:hover{
      color:#066;
      background-color: transparent;
      text-decoration:underline overline;
      }
      #header {
      height: 70px;
      background-color: #EAEAEA;
      border:1px solid #333;
      padding:0;
      }
      #left {
      position:absolute;
      left:0;
      top:90px;
      padding:0;
      width:200px;
      height:100%;
      color:#333;
      background:#eaeaea;
      border:1px solid #333;
      }
      .content {
      position: relative;
      top:20px;
      margin-left:220px;
      margin-right:220px;
      margin-bottom:20px;
      color:#333;
      background:#ffc;
      border:1px solid #333;
      padding:0 10px;
      }
      #right {
      position:absolute;
      right:0;
      top:90px;
      padding:0;
      width:200px;
      height:100%;
      color:#333;
      background:#eaeaea;
      border:1px solid #333;
      }
      #header p {
      padding:10px;
      }
      #left p {
      padding:0 10px;
      }
      #right p {
      padding:0 10px;
      }
      p.top {
      margin-top:20px;
      }
      </style>
        </head>

        <body>
          <div id="header">
            <p>Here is the header:70px high, normal page flow.</p>
          </div>

          <div id="left">
            <p class="top">To solve an inheritance issue
            in div #right as rendered in Opera, class p.top
            using margin-top:20; is applied to the first
            paragraph of each outer divs.</p>
          </div>

          <div class="content">
            <h1>CSS Three Column Liquid Layout 
            with 100% Height Divs</h1>

          <div class="content">
            <p>This design uses a defined body
            height of 100% which allows setting the
            contained left and right divs at 100% height.</p>
          </div>

          <div class="content">
            <p>This design uses a defined body
            height of 100% which allows setting the
            contained left and right divs at 100% height.</p>
          </div>

          <div id="right">
            <p class="top">To solve an inheritance issue
            in div #right as rendered in Opera, class p.top
            using margin-top:20; is applied to the first
            paragraph of each outer divs.</p>
          </div>
        </body>
      </html>
Copy and paste the code into your HTML editing program. Adjust the percentages and observe the results for a fuller understanding of the CSS height property
BIGBAER CSS Tutorials: Header 70px high, normal page-flow.

CSS Three Column Liquid Layout with 100% Height Divs
