时间戳

首页 > 解决方案 > 垂直拉伸 div 内的 div

html - 垂直拉伸 div 内的 div

问题描述

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

标签： htmlcss

解决方案

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>

推荐阅读