用百分比设置子元素的高度，父元素高度自适应

Question

用百分比设置子元素的高度，父元素高度自适应

6

我希望在所有的div中使用相对（以百分比表示）高度，基于屏幕的高度。问题是我正在使用一个自动高度的容器元素。有没有办法在div上使用相对尺寸并仍然具有父级div的自动高度。如果我将容器的高度设置为100％，则一切都按预期工作，但我需要它按其内容扩展。

这基本上是我现在设置的方式：

<html>
<head>
<style>
body, html {
height: 100%;
width: 100%;
}
.container {
height: auto;
width: 100%;
}
.element1 {
height: 15%;
width: 80%;
}
.element2 {
height: 25%;
width: 80%;
}
</style>
</head>
<body>
<div class="container">
    <div class="element1">Some text here</div>
    <div class="element2">Some stuff here</div>
</div>
</body>

感谢您的帮助！

- Juuso

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mister Epic · Accepted Answer

您不能。一个高度值为auto的父元素意味着该父元素会扩展以包含其所有子元素-因此容器的高度取决于其子元素的高度。

如果子元素相对于其父元素具有高度，则它们的高度取决于父元素的高度。

这种循环依赖关系阻止了您所描述的操作。