<分区>
<分区>
我正在尝试创建一个框，其中的内容总是将 100% 的高度带到底部(减去填充)，即使它已调整大小并且内容很小。我被想法困住了……感谢所有建议!
还有一支笔:https://codepen.io/Dalmat/pen/VOmxzm
.box {
background: lightblue;
width: 200px;
min-height: 100px;
padding: 10px;
text-align: center;
overflow: auto;
resize: both;
}
.box_bottom {
background: darkblue;
color: white;
}<div class="box">
<div class="box_top">
Title
</div>
<div class="box_bottom">
Content
</div>
</div>最佳答案
Flexbox 对于这样的东西非常方便。 Flexbox 的完整指南是一篇值得阅读的好文章:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.box {
background: lightblue;
width: 200px;
height: 100px;
padding: 10px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: stretch;
}
.box_bottom {
background: darkblue;
color: white;
height: 100%;
}<div class="box">
<div class="box_top">
Title
</div>
<div class="box_bottom">
Content
</div>
</div>关于html - 垂直拉伸(stretch)div内的div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56129788/