TABLE div的最小高度100%

我想让我的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 ?也许改变文档类型对我有帮助?我尝试了各种变体，但它们也不能跨浏览器

replace:

min-height:100%;

height:100%;

在这里适用于chrome和FF。

我不知道这是否会解决您的问题，但123不是真正有效的内容，其display属性设置为table的元素。这相当于使用以下标记:

<table>123</table>

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

对于CSS table显示值，您至少应该设置一个子元素以显示为table-cell:

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

相关内容

最新更新

热门标签：