3

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

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

当页面在 IE（特别是我的目标浏览器）中呈现时，表格被拉伸到视口范围之外。具体来说，表格的尺寸增加了 20 像素。即使我将表格设置为固定高度，它仍然会在我设置的尺寸上增加 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 超出视口。

4

1 回答 1

2

这很正常。表格行之一的高度为“20px”，另一行的高度为“100%”。

使用“height:auto”代替“height:100%”。

如果第一行的高度为 20px，这将强制浏览器计算父元素的左侧页面高度空间：

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

于 2012-10-14T08:10:25.707 回答