Html 如何强制一个div到包装div的底部并设置背景色

我有一个包装器

div

，它包含另外两个

div

，一个

左列

div和一个

右列

div。目前，左列的最小固定高度为

421px

。一旦内容超出右列，问题就会显现出来，这实际上使包装器div大于最初指定的高度

421px

。这是一个

我希望左列的

minheight

为

421px

，并一直延伸到包装器div的底部，并为其设置背景色，即使其中没有内容。我该怎么做

.wrapper{
溢出：滚动；
背景：白色；
字体系列：“机器人”；
字体大小：14px；
线高：1.5；
宽度：298px；
显示：块；
保证金：0；
左边距：20px；
边缘底部：0.5cm；
盒影：0.5cm rgba（0,0,0,0.35）；
-webkit字体平滑：抗锯齿；
}
.左栏{
浮动：左；
宽度：30%；
最小高度：421px；
背景色：#144071；
颜色：白色；
}
.右栏{
浮动：对；
宽度：70%；
身高：100%；
颜色：黑色；
}

内容
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。官员们的职责是，在福吉特的一方，他们的权利是有限的。埃维尼特。Lorem ipsum dolor sit，amet Concertetur Adipising Elite。官员们的职责是，在福吉特的一方，他们的权利是有限的。埃维尼特。Lorem ipsum dolor sit，amet Concertetur Adipising Elite。我的职责是罪责，而不是惩罚
由于右栏的高度设置为100%，左栏的高度设置为421px，因此一旦内容超出固定高度，左栏将失去其背景色。如何使左侧bkg颜色延伸到末端，但最小固定高度为421px？

首先，将左栏的高度更改为padding bottom。其次，将动态填充底部更改为离开右列的高度。像这样：

$(document).ready(function() {
    var rightHeight = $('right-column').offsetHeight;
    $('.left-column').css(padding - bottom: rightHeight);
})

使用flexbox

.wrapper{
背景：白色；
字体系列：“机器人”；
字体大小：14px；
线高：1.5；
宽度：298px；
显示器：flex；
保证金：0；
左边距：20px；
边缘底部：0.5cm；
盒影：0.5cm rgba（0,0,0,0.35）；
-webkit字体平滑：抗锯齿；
}
.左栏{
宽度：30%；
最小高度：421px；
背景色：#144071；
颜色：白色；
}
.右栏{
宽度：70%；
颜色：黑色；
}

内容
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。官员们的职责是，在福吉特的一方，他们的权利是有限的。埃维尼特。Lorem ipsum dolor sit，amet Concertetur Adipising Elite。我的职责是罪责，而不是惩罚
圣福吉特。埃维尼特。Lorem ipsum dolor sit，amet Concertetur Adipising Elite。我的职责是罪责，而不是惩罚
由于右栏的高度设置为100%，左栏的高度设置为421px，因此一旦内容超出固定高度，左栏将失去其背景色。如何使左侧bkg颜色延伸到末端，但最小固定高度为421px？

如下更改您的css：

---

我使用包装器上的

display:flex

修改了你的小提琴：不需要使用a）javascript，b）javascript库。当然，这不是解决这个问题的最佳方法。Paulie向我们展示了Flexbox的最佳形式。

.wrapper{
  background: white;
  font-family: "Roboto";
  font-size: 14px;
  line-height: 1.5;
  width: 298px;
  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;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  height: auto; 
}

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

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