Question

我正试图让我的div min-height 100％的屏幕。我明白，关于它有很多问题，但我有条件：我的div应该是display：table。所以有代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>
        <style type="text/css">
            body, html {
                height: 100%;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div style="display: table; background-color: red; width: 100%; min-height: 100%;">
            <div style="display: table-cell;">123</div>
        </div>
    </body>
</html>

适用于Chrome和IE。 Div真的是100％的高度。但它在FF，Opera和Safari中不起作用。有表格显示的div有什么解决方案吗？可能会改变doctype可以帮到我吗？我试过变种，但它们也不是跨浏览器

Answer 1

取代：

min-height:100%;

与

height:100%;

在这里完美适用于chrome和FF。

Answer 2

我不知道这是否可以解决您的问题，但123对于display属性设置为table的元素来说并不是真正有效的内容。这与具有以下标记相同：

<table>123</table>

您的表没有行或单元格，但您希望内容显示在某处。

使用CSS table显示值，您至少应将子元素设置为table-cell：

<div style="display: table">
    <div style="display: table-cell">
        123
    </div>
</div>

TABLE div的最小高度为100％

2 个答案: