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，则为。

如何将div扩展到他兄弟div的高度

1 个答案: