0

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

问题是，当我调整浏览器的大小时，尽管宽度工作得很好，但高度却不一样。即使我已将每个 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% 的高度，所以我相信这意味着它应该固定在桌子高度的 20%，即屏幕 100% 的 20%。TD 定义为 33% 宽度（3 列 33% 填充浏览器）和高度 100%（此列将填充其父 TR 的 100%，设置为浏览器高度的 20%）。最后，图像设置为填充它的 TR/TD，因此设置为 100%x100%。

4

4 回答 4

1

您需要将以下内容添加到您的样式中。

html, body { height: 100% }

​并改变你的

<td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>

到

<td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>

你可以在这里看到它，http://jsfiddle.net/RFdSw/

于 2012-07-01T11:26:37.960 回答
1

这是小提琴：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%;}​
于 2012-07-01T11:27:52.813 回答
1 
<!DOCTYPE html>

<html>
    <head>
        <style type="text/css">
            html, body{height:100%;width:100%;margin:0;padding:0}
            #mytable
            {
                height:100%;
                width:100%;
                table-layout:fixed;
            }           
            #mytable td
            {
                width;33%;
                height:19%;
            }
            #mytable td img
            {
                width:100%;
                height:100%;
            }
        </style>
    </head>
    <body>
        <div id="portrait" style="width:100%;height:100%;">
    <table cellpadding="0" cellspacing="0" border="1" id="mytable">
        <tr>
            <td><img src="bg-bottom.gif"></td>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
        </tr>
        <tr>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
        </tr>
        <tr>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
        </tr>
        <tr>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
        </tr>
        <tr>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
        </tr>
    </table>
</div>

    </body>
</html>

这应该适合你。

于 2012-07-01T11:57:31.393 回答
0

试试这个

#portrait {
    height: 0;
}
table {
    height: 100%;
}
tr {
    height: 20%;
}
于 2014-01-12T02:14:20.017 回答