左分区固定，多个右分区可滚动

我试图有一个静态的左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; 
}

来源

2017-04-15 Koraxel

你只需要设置位置：固定为左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>

来源

2017-04-15 20:10:26 Nimish

谢谢Nimish，你的方法最适合我试图完成的事情 – Koraxel

??其中一个div从不显示... div 3在哪里？ –

你需要在固定的位置，第一和其余部分保证金在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>

来源

2017-04-15 20:01:39

感谢GCyrillus！你的方法奏效了。 – Koraxel

左分区固定，多个右分区可滚动

回答

相关问题