Setting 100% Table Height

In this tutorial I will demonstrate how you can set the table to 100% height of the browser. Some times you may want to set the the table to full height because you may have set a background image or a background color. The CSS file sets the html, body tag to a full 100% height and it also set the wrapper class to a full 100%. This method is complaint with the XHTML 1.0 Strict. Notice that the table id must be named wrapper because this is what we name them in the CSS file.

HTML File:

    1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2 <html xmlns="http://www.w3.org/1999/xhtml">
    3 <head>
    4     <title>Vacancies</title>
    5     <link href="./theme/css/teleo.css" rel="stylesheet" type="text/css" media="screen"></link>
    6     <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />    
    7 </head>
    8 <body>
    9     <table cellpadding="0" cellspacing="0" id="wrapper">
   10         <tr>
   11             <td class="lefthandNav"><img src="./theme/Images/logo_rio_home.gif" alt="RioTinto Logo" /></td>
   12             <td valign="top" style="width:100%;" >
   13             <div style="height:154px; background-color:#E60D2E; width:100%;"></div>
   14             <div>               
   15                 <insertcontent xmlns="http://www.taleo.com/templates" />           
   16             </div>
   17             </td>
   18         </tr>
   19     </table>
   20 </body>
   21 </html>

CSS File:

    1 html, body, #wrapper {
    2       height:100%;
    3       margin: 0;
    4       padding: 0;
    5       border: none;
    6       text-align: center;
    7 }
    8 
    9 #wrapper {
   10   margin: 0 auto;
   11   text-align: left;
   12   vertical-align: middle;
   13   width: 90%;
   14 }
   15 
   16 .lefthandNav{
   17     background-image: url(./../Images/bg_homepage_page.gif);
   18     background-repeat: repeat-y;   
   19     width:154px;
   20     height:100%;   
   21     vertical-align:top;
   22 }