2

此示例代码在 IE 10 中无法按预期工作（内表没有获得剩余空间）。我去掉 .css 和其他元素只是为了突出我的问题。

我想使用内表来获取顶部 50px 线和底部 30px 线之间的所有空间。在另一个 doctype 中它可以工作，但我必须在我的项目中使用这个 doctype。

<!DOCTYPE html>

<html style="height: 100%">
<body style="height: 100%">
    <table style="height: 100%">
        <tr style="height: 50px">
            <td>
                &nbsp;
            </td>
        </tr>
    <tr>
            <td>
                <table style="height: 100%; background: #f00">
                    <tr>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    <tr style="height: 30px">
            <td>
                &nbsp;
            </td>
        </tr>
    </table>
</body>
</html>
4

1 回答 1

1

实际上这在 IE9 中也不起作用。这不是错误，它是 IE 渲染引擎的预期行为。你的内表没有被拉伸，因为它忽略了height:100%. 这是因为 DOM 元素必须height在某些单元中具有具有指定 CSS 属性的直接父级（height: auto不计算在内）。如果您在TD（inner 的父级TABLE）上指定高度，则它将起作用。但是你不能指定height: 100%-50px-30pxfor TD，所以这个标记不适合你想要实现的布局。

您的布局是一个经典的页眉-正文-页脚，具有固定的页眉和页脚高度以及自动拉伸的正文。这是网络中非常流行的布局。有很多方法可以让它跨浏览器工作（IE、Chrome、Firefox、Safari）。我最喜欢的让它跨浏览器工作的选项（包括 IE7）：

  • 使用三个 DIV，对于页眉和页脚明确指定高度，对于 body make position:absolute; top:<header-height>; bottom:<foooter-height>。此外，所有三个 DIV 都需要包装在一个绝对定位的容器中。
于 2012-12-25T08:34:35.290 回答