在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/

css lang-css prettyprint-override">.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>