我使用上面的代码尝试创建一个包含 3 个较小 div 的 div。代码运行良好，但底部有一个空白空间......我如何扩展每个 div 的高度，使它们同样占据外部 div 的整个高度(无需设置 height: ...为他们中的每一个)？
谢谢
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
border: 1px solid black;
height: 100px;
}
.div2 {
border: 1px solid red;
background-color: yellow;
}
.div3 {
border: 1px solid red;
background-color: gray;
}
.div4 {
border: 1px solid red;
background-color: blue;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">Just</div>
<div class="div3">A</div>
<div class="div4">Test</div>
</div>
</body>
</html> 
最佳答案
起初您可能认为最简单的方法是将所有内部 div 设置为 height: 33.33%;，但是内部 div 的边框提供了难度，如示例所示下面:
.div1 {
border: 1px solid black;
height: 100px;
}
.div1 > div {
border: 1px solid red;
height: calc(33% - 2px);
}
.div2 {
background-color: yellow;
}
.div3 {
background-color: gray;
}
.div4 {
background-color: blue;
}<div class="div1">
<div class="div2">Just</div>
<div class="div3">A</div>
<div class="div4">Test</div>
</div>要解决此问题，您可以将 div 的高度设置为 height: calc(33.33% - 2px);
.div1 {
border: 1px solid black;
height: 100px;
}
.div1 > div {
border: 1px solid red;
height: calc(33.33% - 2px);
}
.div2 {
background-color: yellow;
}
.div3 {
background-color: gray;
}
.div4 {
background-color: blue;
}<div class="div1">
<div class="div2">Just</div>
<div class="div3">A</div>
<div class="div4">Test</div>
</div>或者你可以使用 outline 而不是 border 即改变
border: 1px solid red;
到
outline: 1px solid red;
.div1 {
border: 1px solid black;
height: 100px;
}
.div1 > div {
outline: 1px solid red;
height: 33.33%;
}
.div2 {
background-color: yellow;
}
.div3 {
background-color: gray;
}
.div4 {
background-color: blue;
}<div class="div1">
<div class="div2">Just</div>
<div class="div3">A</div>
<div class="div4">Test</div>
</div>另一种方法是将父级设置为 display: flex; 和 flex-direction: column; 并将内部 div 设置为 flex: 1; 这也将起作用。
.div1 {
border: 1px solid black;
height: 100px;
display: flex;
flex-direction: column;
}
.div1 > div {
outline: 1px solid red;
flex: 1;
}
.div2 {
background-color: yellow;
}
.div3 {
background-color: gray;
}
.div4 {
background-color: blue;
}<div class="div1">
<div class="div2">Just</div>
<div class="div3">A</div>
<div class="div4">Test</div>
</div>关于HTML - 使 div 内的 div 具有全高，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45647923/