Question

我一直在想要填充浏览器窗口的表格出现问题。它有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％（此列将填充100％的父TR，设置为浏览器高度的20％）。最后，图像设置为填充TR / TD，因此设置为100％x100％。

Answer 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/

Answer 2

这是小提琴：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%;}

Answer 3

<!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>

这应该适合你。

Answer 4

试试这个

#portrait {
    height: 0;
}
table {
    height: 100%;
}
tr {
    height: 20%;
}

CSS问题，表格没有填满屏幕

4 个答案: