Question

我的代码在

时正常工作

<!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使用vertical-align

<!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覆盖身体的整个空白区域

Answer 1

您的代码现在应该可以使用。

<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>

<强> Example

经验法则：无论何时display : table-cell，都要有适当的标记。

Answer 2

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

html, body {
    height: 100%
}

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

Answer 3

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

.table {
    position: absolute;
}

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

.table {
    height: 100%;
}

这将符合其父高。

div高度：100％;不使用display：table-cell;

3 个答案: