在兩個div中分割頁面時，滾動背景顏色不會填充兩個div上的100％高度

Question

我試圖用分割兩個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/

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>

Answer 2

嘗試使用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>

Answer 3

這可能會解決您的問題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;}