在两个div中分割页面时，滚动背景颜色不会填充两个div上的100％高度

我试图用分割两个div中的页面100％的高度和背景颜色。在两个div中分割页面时，滚动背景颜色不会填充两个div上的100％高度

的问题，当你滚动页面开始：在第二个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%; }

我发现了计算器，但没有人能帮助我在这种特殊情况下类似的问题。

这里小提琴：https://jsfiddle.net/jprohj09/

来源

2017-04-24 DevT

使用显示：柔性的方法和删除高度 –

你能不能设置一个固定的高度比到处100％？在这种情况下，它将采用视口高度。但是，如果您的左侧div有静态内容，您可以使用该高度 –

您可以在.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>

来源

2017-04-24 09:58:56

尝试使用flexbox模型

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

<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> 
 
    <!-- you can skip this one <div style="clear: both;"> --> 
 
</div>

来源

2017-04-24 10:00:25

这可能会解决您的问题jsfiddle。使用display:table的包装。

CSS：

body, html { 
    height: 100%; 
    margin: 0; 
} 
.wrap{ min-height:100%; height: 100%;display: table;width: 100%;} 
.floatleft{background-color:red; min-height:100%; float:left; width: 50%; } 
.floatright{background-color:yellow; float:right; min-height:100%; width: 50%; } 
.wrap > div{ display: table-cell;float:none;}

来源

2017-04-24 10:01:42

在两个div中分割页面时，滚动背景颜色不会填充两个div上的100％高度

回答

相关问题