我的页面结构如下:
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
我想将 .child 的高度设置为等于 .parent 的高度(这是已知的),但不定位 child 的绝对高度。所以结果将是一个与父级一样高的子级列表。
最佳答案
您可以设置父级的高度,然后将每个子级的高度设置为 100%,这样每个子级的高度都将与父级相同,即使这会扩展父级。
.parent
.child:nth-child(1) {background-color: #f00;}
.child:nth-child(2) {background-color: #0f0;}
.child:nth-child(3) {background-color: #00f;}
.parent {
height: 100px;
background-color: red;
}
.child {
height: 100%;
}
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
关于javascript - 如何将 child 的div高度扩展到 parent 的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48843953/