14

我的代码在工作时

<!DOCTYPE html>
<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
<div style="height:100%; width:100%; border:solid;"></div>
</body>
</html>

但是当我添加 display:table-cell; 时不起作用 用于使用垂直对齐的 div

<!DOCTYPE html>
<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
<div style="height:100%; width:100%; border:solid; display:table-cell;vertical-align:middle;"></div>
</body>
</html>

我希望 div 覆盖身体中的整个空白区域

4

3 回答 3

18

您的代码现在应该可以工作了。

<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
    <div style='display : table; width : 100%; height : 100%'>
    <div style='display : table-row;'>
        <div style="border:solid; display : table-cell;">
        </div>
    </div>
    </div>
</body>
</html>

例子

经验法则：无论何时，总是有一个适当的标记display : table-cell。

于 2012-06-06T08:36:42.610 回答
1

您必须将所有父元素的高度设置为 100%，然后...

html, body {
    height: 100%
}

试一试，它对我有用。并且最好删除您之前为 body-element 设置的所有 CSS 属性。

于 2012-06-06T08:12:54.703 回答
1

具有容器高度的 div.table > div.table-row > table.table-cell 有点棘手。最简单的方法之一是您可以添加

.table {
    position: absolute;
}

在这种情况下，如果您要添加

.table {
    height: 100%;
}

这将适合其父身高。

于 2016-12-18T07:39:49.343 回答