Wednesday, August 09, 2006

Why isn't my HTML table taking up the whole window when I set width and height to 100%?

I seems like every time I start back with webpages from WinForms or services, I want to create a simple table that takes up the entire page, so I do something like this:
<table style="height: 100%; width: 100%;background-color: Gray">
<tr>
<td>foo&</td>
</tr>
</table>

I would expect my entire browser window to now show up with a gray background due to the table I added filling the entire window. What I actually see is a gray square in the upper-left portion of the browser which is grey, with my "foo" text displayed.

It seems that this "problem" is actually the expected behaviour with the above snippet. The rendered HTML is sitting within a HTML and BODY tag that we have yet to address, so it's filling 100% of the BODY width/height.

Here is one way to correct this issue - create a stylesheet and add the following declaration:
html, body
{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
border: none;
}

When you apply this stylesheet to your page and refresh in your browser you should now see a gray background over your entire browser window.