如何使用CSS让2个不同背景的列等高？

Question

我有两列（使用 Wordpress #Primary 和 #Secondary），每页的内容长度各不相同。每一列都有自己的背景样式，一个是渐变（#primary），另一个是背景图片（#Secondary）。

当每列的内容高度不同时，渐变或图像只会下降到列中的内容。

如何使列样式成为较长列高度的 100%？

Answer 1

使用弹性。

.container {
  border: 2px solid green;
  padding: 20px;
  display: flex;
}

.container>div {
  border: 1px solid black;
  background: #ececec;
  padding: 10px;
  margin-left: 10px;
  flex: 1;
}

<div class="container">
  <div>Div 1 Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1</div>
  <div>Div 2</div>
</div>

如何使用CSS让2个不同背景的列等高？

How to use CSS to make 2 columns with different backgrounds equal height?

css

wordpress

multiple-columns