垂直拉伸div内的div [重复]答案

【问题标题】：Stretch div inside a div vertically [duplicate]垂直拉伸div内的div [重复]
【发布时间】：2019-10-01 10:38:47
【问题描述】：

我正在尝试创建内容总是将 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>

【问题讨论】：

你试过height: 100%; 换.box_bottom 吗？据我了解，CSS 中的百分比是相对于封闭元素的，因此将其设置为将其设置为尽可能大
你试过 flexBox 了吗？ Flex 元素一直在扩展，直到它们无法再扩展
@GreenCloakGuy 是的，即使 100% 在 body 和 html 上，它似乎也不起作用......

标签： html css

【解决方案1】：

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>

【讨论】：

【解决方案2】：

将最小高度添加到box_bottom

.box {
  background: lightblue;
  width: 200px;
  min-height: 100px;
  padding: 10px;
  text-align: center;
  overflow: auto;
  resize: both;
}

.box_bottom {
  background: darkblue;
  color: white;
  min-height: 80px
}

<div class="box">
  <div class="box_top">
    Title
  </div>
  <div class="box_bottom">
    Content
  </div>
</div>

【讨论】：