html - CSS 表大于指定值

Question

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

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

当页面在 IE 中呈现时，特别是我的目标浏览器，表格被拉伸(stretch)到视口(viewport)范围之外。具体来说，表格的尺寸增加了 20px。即使我将表格设置为固定高度，它仍然会在我设置的尺寸上增加 20px。我希望代码强制表格达到 100% 高度，顶部单元格为 20px，底部单元格专门占用表格高度的剩余可用空间，而不拉伸(stretch)表格。这在 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 中，包含的表格最终高了 20 像素并超出了视口(viewport)，导致 iframe 底部的 20 像素超出了视口(viewport)。

Answer 1

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

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

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

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