html - CSS 问题，表格未填满屏幕

Question

我一直遇到要填充浏览器窗口的表格的问题。它有 3 列宽，5 行高。我想要的结果是每个单元格占屏幕宽度的 33%，每个单元格占屏幕高度的 20%。没有固定值，相反我想用百分比来做所有事情，以便它调整大小/拉伸(stretch)以始终填充浏览器。

问题是，当我调整浏览器大小时，虽然宽度可以正常工作，但高度却不能以同样的方式工作。尽管我已将每个 TR 行指定为 20% 高，但它并没有以这种方式工作。发生的情况是屏幕的下半部分仍然是空的，并且 5 行没有遵循我指定的 20% 高度。在一个奇怪的例子中(在尝试的时候)，第一行是高度的 50%，另外 50% 是底部 4 行。目前(如下图)，这 5 行约占屏幕高度的 60%，其余 40% 未使用。我有提到我讨厌 CSS 吗？

这是表格:

<div id="portrait" style="width:100%;height:100%;">
    <table cellpadding=0 cellspacing=0 border=1 style="width:100%;height:100%;">
        <tr style="width:100%;height:20%;">
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
    </table>
</div>

在每个级别中，我都定义了宽度和高度，然后在内部定义了一个相对百分比，并牢记父容器。在图像标记所在的最内层，它被设置为 100%x100%，以便填充它的容器(TD 中定义的宽度为 33%，TR 中定义的高度为 20%)。

就第一张图片而言，这是我如何阅读上面的 html。 div 设置为使用浏览器宽度的 100% 和高度的 100%。它只包含一个元素，一张表。该表被定义为 100%x100%，但这当然受限于它的父容器 - div，但由于它也是 100%x100%，该表应该是完整的浏览器大小(恕我直言)。 TR 定义宽度为 100%，因此它填充了浏览器的宽度。它设置为 20% 高度，所以我认为这意味着它应该固定在 table 高度的 20%，即 100% 屏幕的 20%。 TD 定义为 33% 宽度(3 列 33% 以填充浏览器)和高度 100%(此列将填充其父 TR 的 100%，其设置为浏览器高度的 20%)。最后，图像被设置为填充它的 TR/TD，因此设置为 100%x100%。

Answer 1

这是 fiddle :http://jsfiddle.net/surendraVsingh/R3aCb/

这是工作代码:

HTML:

<div id="portrait" style="width:100%;height:100%;">
    <table cellpadding=0 cellspacing=0 border=1 height="100%" style="width:100%; height:100%;">
        <tr style="width:100%;height:20%;">
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
    </table>
</div>​

CSS

html, body{height:100%;}​