html - 如何强制 div 到包装 div 的底部并设置背景颜色

Question

我有一个包装器 div，它包含另外两个 div，一个 left-column div 和一个 right-column分区。目前，左列的固定最小高度为 421px。一旦内容超出右栏，问题就会变得明显，有效地使包装器 div 大于最初指定的 421px 高度。这是一个Fiddle

我希望左列的 min-height 为 421px 并一直延伸到包装 div 的底部并为其设置背景色，即使里面没有内容。我该怎么做？

.wrapper{
  overflow: scroll;
  background: white;
  font-family: "Roboto";
  font-size: 14px;
  line-height: 1.5;
  width: 298px;
  display: block;
  margin: 0;
  margin-left: 20px;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.35);
  -webkit-font-smoothing: antialiased;
}

.left-column {
  float: left;
  width: 30%;
  min-height: 421px;
  background-color: #144071;
  color: white;
}

.right-column {
  float: right;
  width: 70%;
  height: 100%;
  color: black;
}

<div class="wrapper">
  <div class="left-column"> content content </div>
  <div class="right-column"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi officiis iste culpa, pariatur vel dolores aspernatur quo sint fugit. Eveniet. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi officiis iste culpa, pariatur vel dolores aspernatur quo sint fugit. Eveniet. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi officiis iste culpa, pariatur vel dolores aspernatur 
    <div style="margin-top: 20px;">
      <strong>Because the height of the right column is set to 100% and the left column to a fixed height of 421px, once content stretches out of the fixed height, the left column loses it's background color. How can I make it so that the left bkg color is stretched to the end, but has a minimal fixed height of 421px?</strong>
    </div>
  </div>
</div>

Answer 1

使用 flex 盒...

.wrapper {
  background: white;
  font-family: "Roboto";
  font-size: 14px;
  line-height: 1.5;
  width: 298px;
  display: flex;
  margin: 0;
  margin-left: 20px;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.35);
  -webkit-font-smoothing: antialiased;
}

.left-column {
  width: 30%;
  min-height: 421px;
  background-color: #144071;
  color: white;
}

.right-column {
  width: 70%;
  color: black;
}

<div class="wrapper">
  <div class="left-column"> content content </div>
  <div class="right-column"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi officiis iste culpa, pariatur vel dolores aspernatur quo sint fugit. Eveniet. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi officiis iste culpa, pariatur vel dolores aspernatur
    quo sint fugit. Eveniet. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi officiis iste culpa, pariatur vel dolores aspernatur
    <div style="margin-top: 20px;">
      <strong>Because the height of the right column is set to 100% and the left column to a fixed height of 421px, once content stretches out of the fixed height, the left column loses it's background color. How can I make it so that the left bkg color is stretched to the end, but has a minimal fixed height of 421px?</strong>
    </div>
  </div>
</div>