我试图将页面分成两个 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/
最佳答案
您可以在 .wrap
上使用 display:flex
使两列具有相同的高度。看下面的片段:
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>
关于html - 在两个 div 中拆分页面,当滚动时背景颜色不会填充两个 div 上的 100% 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43585002/