左分區固定，多個右分區可滾動

Question

我試圖有一個靜態的左div，並有正確的divs可滾動。我想變得靈活，所以我將寬度和高度設置爲百分比。

當前，當我用正確的div滾動左邊的div滾動條，所以當我到達堆棧中的第二個右邊div時，沒有與div關聯。

我想讓左邊div始終保持不變，只有正確的div才能滾動。

HTML：

<div class= "div-left div-left-small"> 
</div> 
<div class= "div-right-1 div-right-1-small"> 
</div> 
<div class= "div-right-2 div-right-2-small"> 
</div> 
<div class="div-right-3 div-right-3-small"> 
</div> 

CSS：

html{ 
height:100%; 
width:100%; 
margin: 0px; 
} 

body{ 
height:100%; 
width: 100%; 
margin: 0px; 
} 

.div-left{ 
    background-color: darkblue; 
    height: 100%; 
    width:50%; 
    margin: 0px; 
    float: left; 
    position: static; 
} 

.div-right-1{ 
    background-color: yellow; 
    height: 100%; 
    width: 50%; 
    margin: 0px; 
    float: right; 
} 

.div-right-2{ 
    background-color: aqua; 
    height: 100%; 
    width: 50%; 
    margin:0px; 
    float: right; 
} 

Answer 1

你只需要設置位置：固定爲左div。檢查下面的代碼。

html{ 
 
    height:100%; 
 
    width:100%; 
 
    margin: 0px; 
 
} 
 

 
body{ 
 
    height:100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
} 
 

 
.div-left{ 
 
    background-color: darkblue; 
 
    height: 100%; 
 
    width:50%; 
 
    margin: 0px; 
 
    float: left; 
 
    position: fixed; 
 
} 
 

 
#clear { 
 
    clear: both; 
 
} 
 

 
.div-right-1{ 
 
    background-color: yellow; 
 
    height: 100%; 
 
    width: 50%; 
 
    margin: 0px; 
 
    float: right; 
 
} 
 

 
.div-right-2{ 
 
    background-color: aqua; 
 
    height: 100%; 
 
    width: 50%; 
 
    margin:0px; 
 
    float: right; 
 
}

<div class= "div-left div-left-small"> 
 
</div> 
 
<div class= "div-right-1 div-right-1-small"> 
 
</div> 
 
<div id="clear"></div> 
 
<div class= "div-right-2 div-right-2-small"> 
 
</div> 
 
<div class="div-right-3 div-right-3-small"> 
 
</div>

Answer 2

你需要在固定的位置，第一和其餘部分保證金在50％...如果我的理解：

html { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
} 
 

 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
} 
 

 
.div-left { 
 
    background-color: darkblue; 
 
    height: 100%; 
 
    width: 50%; 
 
    margin: 0px; 
 
    position: fixed; 
 
} 
 

 
[class^="div-right"] { 
 
    background-color: yellow; 
 
    height: 100%; 
 
    margin-left: 50%; 
 
} 
 

 
.div-right-2 { 
 
    background-color: aqua; 
 
}

<div class="div-left div-left-small"> 
 
</div> 
 
<div class="div-right-1 div-right-1-small"> 
 
</div> 
 
<div class="div-right-2 div-right-2-small"> 
 
</div> 
 
<div class="div-right-3 div-right-3-small"> 
 
</div>