Question

我不想明确地设置body的高度，并将子div'的高度设置为百分比。

<!doctype html>
<html>
<body>
    <div style="height:10%">
        fdjfdkjl
    </div>
    <div style="height:90%">
        dsds
    </div>
</body>
</html>

然而，这不起作用。为什么？在规范中有行为描述：

当使用百分比表示法时，计算元素的高度相对于父母的身高。如果父级未设置明确地使用了浏览器的窗口。

好的，我可以将100％设置为body，但这也不起作用：它的高度只是包装内容。为什么不使用浏览器的窗口？

Answer 1

正如@MattK所说，

html, body { height: 100%; }

解决了这个问题。我认为这种方法有效，因为div s'和body的父母已经定义了大小。 <{1}}没有父级，并且使用了窗口html。

在计算没有高度的父元素的高度时使用百分比表示法

1 个答案: