Question

我想根据屏幕的高度在所有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>

我们将非常感谢您的帮助！

Answer 1

你做不到。高度值为auto的父级表示父级将扩展为包含其所有子级 - 因此容器的高度取决于其子级的高度。

如果孩子相对于父母的身高，他们的身高取决于父母的身高。

这种循环依赖会阻止你做你描述的事情。

使用自动高度父级以百分比表示高度

1 个答案: