在div内垂直拉伸div

Question

我正在尝试创建一个框，该框的内容将始终达到底部的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>

Answer 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>

Answer 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>