CODEWITHSUNDEEP
htmlcsslayouthtml-table
Mikhail
Mikhail

Reputation: 1346

How to stretch an HTML table to 100% of the browser window height?

I'm using a table to design the layout of my web page. I want the table to fill the page even if it doesn't contain much content. Here's the CSS I'm using:

html, body {
    height: 100%;
    margin: 0;
    padding: 0; 
}

#container {
    min-height: 100%;
    width: 100%; 
}

And I place something like this in the page code:

<table id="container">
<tr>
<td>
...

This works for Opera 9, but not for Firefox 2 or Internet Explorer 7. Is there a simple way to make this solution work for all popular browsers?

(Adding id="container" to td doesn't help.)

Upvotes: 12

Views: 48136

Answers (3)

Priyanga
Priyanga

Reputation: 143

You can handle this in Javascript/JQuery.

window_height = $(window).height();
$('#container').css('min-height', window_height);

Upvotes: 0

deathlock
deathlock

Reputation: 2837

Try using this:

html, body    {
  height: 100%;
}

So besides making the table's height to 100%, you also should have to make sure that the html'd and body's height are also 100%, so it will stretch properly.

Upvotes: 20

Vincent McNabb
Vincent McNabb

Reputation: 34659

Just use the height property instead of the min-height property when setting #container. Once the data gets too big, the table will automatically grow.

Upvotes: 8

Related Questions