How to stretch an HTML table to 100% of the browser window height?
-
01-07-2019 - |
Question
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.)
Solution
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.
OTHER TIPS
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.