Left Div Fixed，Multiple Right Divs Scrollable

Question

我尝试使用静态左div并使正确的div可滚动。我想要灵活，所以我将宽度和高度设置为百分比。

目前，当我使用右侧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

你需要第一个处于固定位置，剩下的是保证金 - 保持在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>

Answer 2

你只需要设置位置：固定为左div。检查下面的代码。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;