div高度（％）不起作用，但是在px或vh中起作用

Question

我有一个对话框，并且在对话框主体内，我正在尝试渲染表。 我将一个CSS类应用于div包装表。 当以px或vh表示高度时，它可以正常工作。但是，当以百分比指定的高度设为50％时，它不会限制表div的高度并呈现100％。

我知道％是根据父元素计算得出的，但由于我也将css类应用于对话框，因此无法理解为什么它没有得到父元素的高度。 对话框将是屏幕大小的95％。

.dialogbox{
   width: 95%;
   height: 95%;
}

.table-height {
    height: 50%;
}

以百分比指定高度时，内容将呈现为完整大小，而不是50％。

Answer 1

正如yo.chen所指出的，您必须添加body, html { height: 100% }。原因是您的父元素也使用百分比，因此其父元素也必须具有定义的高度。如果您在html, body上设置高度（同时添加两个帐户的浏览器差异），它将使用窗口高度，其余文档的起始基准高度也将设置为该高度。

Answer 2

如果对话框在正文下方 您的需要

body, html { height: 100% }

Answer 3

将您的父元素更改为vh，它应该可以工作。现在父元素具有适当的高度，然后内部的表可以根据父元素计算其高度。

new