CSS表格比指定的尺寸要大。

Question

我正在编写一些代码来生成一个带有标题的“全屏”页面。我使用了一个表格来进行布局，用CSS指定了尺寸和格式。 该表格的高度和宽度均设置为100％，以使其填满窗口/视口，最初起到了预期效果。表格有两行，每行各有一个单元格。第一行的单元格高度为20px，而另一行的单元格高度为100％，以允许其填充窗口的剩余空间。在底部单元格中是一个iFrame，设置为100％x100％以填充单元格。iFrame按预期工作，但表格未遵循其设置。 当页面在IE（特别是我的目标浏览器）中呈现时，该表格会被拉伸到视口范围之外。具体来说，该表格将其维度增加了20像素。即使我将表格设置为固定高度，它仍然会将我设置的尺寸增加20像素。我期望代码强制表格高度为100％，具有20像素的顶部单元格，并使底部单元格占据表格高度的剩余可用空间，而不会拉伸表格。在Chrome中，这完美地工作，但是IE仍在将表格的高度设置为100％+20像素，即使使用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像素，并且超出了视口，导致iframe底部的20像素也超出了视口。

- Ceetch

---

不要使用 height: 100%;。当针对IE时，这是最糟糕的事情。使用JQuery计算窗口高度，然后从中减去20px并将其应用于您的行。使用 100% 将分配窗口的100%，然后在另一行中添加20px。这是一个简单的事情，没有人喜欢！ - Frederick Marcoux

Answer 1

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

请改用“height:auto”而不是“height:100%”。

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

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

- gotqn