html - 在两个 div 中拆分页面，当滚动时背景颜色不会填充两个 div 上的 100% 高度

Question

我试图将页面分成两个 100% 高度和背景色的 div。

当您滚动页面时，问题就开始了:第二个 div 上的背景颜色未填充 100% 高度(第二个 div 的内容小于另一个)。

HTML 代码

<div class="wrap">
    <div class="floatleft">
      <p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>
      <p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>
      <p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>
      <p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>
    </div>
    <div class="floatright"><p>s</p><p>s</p></div>
    <div style="clear: both;"></div>
</div>

CSS

body, html { height: 100%; margin: 0;}

.wrap{ min-height:100%; height: 100%;}

.floatleft{background-color:red; min-height:100%;  float:left;  width: 50%; }

.floatright{background-color:yellow; float:right; min-height:100%;  width: 50%; }

我在 stackoverflow 上发现了类似的问题，但没有人可以帮助我解决这个特殊问题。

这里是 fiddle :https://jsfiddle.net/jprohj09/

Answer 1

您可以在 .wrap 上使用 display:flex 使两列具有相同的高度。看下面的片段:

或jsfiddle

body, html {
  height: 100%;
  margin: 0;
}
.wrap{ display:flex;width:100%}
.floatleft{background-color:red;  width:50%}
.floatright{background-color:yellow;width:50%  }

<div class="wrap">
    <div class="floatleft">
      <p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>
    </div>
    <div class="floatright"><p>s</p><p>s</p></div>
    <div style="clear: both;">
</div>