html - 如何让 div 扩展到他的兄弟 div 的高度

Question

我一直在寻找一段时间，但找不到解决方案。

我有一个包含 2 列内容的 div。

<div id="container">
  <div id="content1">
    Content1
  </div>

  <div id="content2">
    <span style="font-size: 1500px;"> Stretch height</span>
  </div>
</div>

和CSS：

#container {
  height: 100%;
}

#content1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  float:right;
  background-color: pink;
  min-height: 100%;
  height: auto;
}

#content2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  float:left;
  background-color: red;
  min-height: 100%;
  height: auto;
}

目前，#content1 的高度为 100%，而 #content2 已扩展以适应其内容。这样#content1 的背景颜色只出现在顶部，向下滚动时您可以看到它没有着色。

我该如何克服呢？（不使用JS）

Answer 1

min-height: 100%您可以使用 ，而不是使用bottom: 0。当top和bottom属性都设置为 0 时，它将填充整个高度（如果position设置为absolute，即）。