我有一个 jsfiddle这里的例子。我想要做的是让右侧 .inside-right
填充 .right
的高度。你可以看到黑色背景只占据了顶部的一小块空间。我已经尝试了各种高度 100%
、auto
,但似乎无法完全填满。任何建议都会很棒!
.container {
margin: 0;
padding: 0;
display: flex;
flex-flow: row;
}
.container > .field {
width: 100%;
background: #dddd88;
order: 2;
}
.container > .left {
width: 4px;
background: #ccccff;
order: 1;
}
.container > .right {
width: 4px;
background: #ccccff;
order: 3;
}
.top, .bottom {
display: block;
height: 4px;
background: red;
}
.inside-right {
background: black;
width: 4px;
}
<div class="top"></div>
<div class="container">
<div class="field">
Main Body
<br><br><br>
</div>
<div class="left"></div>
<div class="right">
<div class="inside-right">
-
</div>
</div>
</div>
</div>
<div class="bottom"></div>
<span></span>
最佳答案
另一种方法是制作 .right
display: flex
并且默认情况下, child (或 child ,在这种情况下)将拉伸(stretch)
填充父级的高度。
.container {
margin: 0;
padding: 0;
display: flex;
flex-flow: row;
}
.container > .field {
width: 100%;
background: #dddd88;
order: 2;
}
.container > .left {
width: 4px;
background: #ccccff;
order: 1;
}
.container > .right {
width: 4px;
background: #ccccff;
order: 3;
display: flex;
}
.top, .bottom {
display: block;
height: 4px;
background: red;
}
.inside-right {
background: black;
width: 4px;
}
<div class="top"></div>
<div class="container">
<div class="field">
Main Body
<br><br><br>
</div>
<div class="left"></div>
<div class="right">
<div class="inside-right">
-
</div>
</div>
</div>
</div>
<div class="bottom"></div>
<span></span>
关于html - Flexbox如何让子元素填充高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44861438/