我想根据屏幕的高度在所有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>
我们将不胜感激!
你不能.具有高度值auto的父级意味着父级将扩展以包含其所有子级 - 因此容器的高度取决于其子级的高度.
如果孩子的高度相对于他们的父母,他们的身高取决于父母的身高.
此循环依赖性会阻止您执行所描述的操作.