我们可以通过使用CSS的vh
属性来解决这个问题。vh
是一个代表视口高度的单位,可以用于设置元素高度。我们可以设置父元素的高度为100vh
,这将使它的高度等于视口的高度。然后,我们可以使用百分比高度来设置子元素的高度,因为子元素现在位于具有已知高度的父元素内。
代码示例:
.parent {
height: 100vh;
background-color: gray;
}
.child {
height: 50%;
background-color: blue;
}
在这个例子中,父级的高度设置为视口的高度(100vh
),子元素的高度设置为其父元素高度的50%(50%
)。现在,子元素的高度将等于视口高度的50%。
上一篇:百分比高度的DIV不按预期工作