我在下面的布局中有一个 div
<html style="height:100%">
<body style="height:100%">
<div id="divBody" style="height:100%;width:1000px">
<div id="divHeader" style="height:30px"></div>
<div id="divContent" style="height:100%">
<div id="divLeft" style="height:100%; float:left; width:200px; border-left:1px solid black"></div>
<div id="divRight" style="width:800px"></div>
</div>
<div>
</body>
</html>
我的问题是 divContent 的高度如何达到主体的 100%。我需要它做的是占据 divBody 的整个高度减去 divHeader 的高度。所以我将 divContent 的高度设置为自动:
<html style="height:100%">
<body style="height:100%">
<div id="divBody" style="height:100%;width:1000px">
<div id="divHeader" style="height:30px"></div>
<div id="divContent" style="height:auto">
<div id="divLeft" style="height:100%; float:left; width:200px; border-left:1px solid black"></div>
<div id="divRight" style="width:800px"></div>
</div>
<div>
</body>
</html>
现在 divContent 的高度是正确的，它是 divBody 的 100% 减去 divHeader 的高度，但是现在 divLeft 的高度没有填满它的父级 (divContent) 的 100%。我怎样才能在这里两全其美？
最佳答案
因为您知道 #divHeader 的高度是 30px，所以您问题的简单答案是在 #divContent 上使用 calc() > 像这样:
#divContent {
height: calc(100% - 30px);
}
困难的部分是当其他 sibling 的高度未知或动态时，像 #divContent 一样设置 sibling 的高度。那时CSS Flex派上用场:
.flex {
display: flex;
flex-direction: column;
height: 100vh;
}
.top {
flex-shrink: 0;
}
.bottom {
height: 100%;
}
bottom 类的元素将使用 100% 高度减去其兄弟元素的高度。 flex-shrink: 0 规则很重要，主要用于 iOS 设备，以避免在同级设备上收缩。
关于html - 将 div 的高度指定为容器的 100% 减去同级 div 的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10609531/