Question

我正在编写一些代码来生成带有标题的“全屏”页面。我正在使用表格进行布局，CSS指定了尺寸和格式。

该表的高度和宽度为100％，以使其填充窗口/视口，该窗口/视口最初按预期工作。该表有两行，每行一个单元格。第一行的单元格高度为20px，而另一行的单元格高度为100％，以允许它填充窗口的剩余空间。底部单元格内部是iFrame，设置为100％x100％以填充单元格。 iFrame按预期工作，但表格未遵循其设置。

当页面在IE（特别是我的目标浏览器）中呈现时，表格将被扩展到视口范围之外。具体来说，该表格的尺寸增加了20px。即使我将桌子设置为固定高度，它仍然会向我设置的尺寸添加20px。我希望代码强制表格达到100％高度，顶部单元格为20px，底部单元格专门占用桌面高度的剩余可用空间，而不拉伸桌子。这在Chrome中完美运行，但IE使表格的高度保持在100％+ 20px，即使CSS规则将其设置为严格的100％高度。

以下是我的代码的简化版本：

    <table style=" height:100%; width: 100%;"><tr><td style="height: 20px;">
    {content header here}
    </td></tr><tr><td style="height: 100%;">
    {iframe with dimensions 100% x 100% here}
    </td></tr></table>

Chrome中的结果完美显示。在IE中，包含的表格最终高出20px并且在视口外部运行，导致iframe的底部20px位于视口之外。

Answer 1

这是正常的。其中一个表行的高度为“20px”，另一个表的行高为“100％”。

而不是“hegiht：100％”使用“height：auto”。

如果第一行的高度为“20px：

，这将强制浏览器计算父元素的左页面高度空间是多少

此外，如果您的表格有边框且您的元素设置了一些填充或边距，“height：auto”可以为您节省所有潜在的问题。

CSS表大于指定值

1 个答案: