Html 两个div独立滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31647945/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Two divs scrolling independently
提问by Ladislav Tomsa
I need help to make these two <div>'s (#side-navand #content-wrapper) to scroll independently,
我需要帮助使这两个<div>(#side-nav和#content-wrapper) 独立滚动，
HTML:
HTML：
<div id="wrapper">
<div id="top-nav">
Top nav
</div>
<div id="side-nav">
<ul>
<li>Thing</li>
<li>Thing</li>
</ul>
</div>
<div id="content-wrapper">
<!-- Ton of conent here -->
</div>
</div>
CSS:
CSS：
#wrapper {
width: 100%;
background-color: #fff;
}
#top-nav {
position: fixed;
top: 0;
height: 60px;
width: 100%;
background-color: green;
}
#side-nav {
position: fixed;
width: 250px;
height:100vh;
overflow-y: scroll;
background-color: red;
}
#content-wrapper {
margin: 60px 0 0 250px;
padding: 0 30px;
overflow-y: scroll;
background-color: blue;
}
now if I scroll the #side-navto the end or top, #content-wrapperwill scroll too. #side-navhas to stay full-page height and fixed even if there is not that many <li>'s.
现在，如果我滚动#side-nav到末尾或顶部，#content-wrapper也会滚动。#side-nav即使没有那么多，也必须保持整页高度并固定<li>。
I've quickly made pen here:
我在这里很快做了笔：
http://codepen.io/blizqery/pen/QbZzRN
http://codepen.io/blizqery/pen/QbZzRN
Thanks!
谢谢！
回答by Surya Chandra Rao Gandreddi
Check this: http://codepen.io/anon/pen/xGyMjM
检查这个：http: //codepen.io/anon/pen/xGyMjM
You need to set height to content-wrapper, and also set the left, right & top.
您需要将高度设置为内容包装器，并设置左、右和顶部。
#side-nav {
position: fixed;
width: 250px;
height:100vh;
left: 0;
right: 0;
overflow-y: scroll;
background-color: red;
top: 60px;
}
#content-wrapper {
margin: 60px 0 0 250px;
padding: 0 30px;
overflow-y: scroll;
position: fixed;
left: 0;
top: 0;
height:100vh;
background-color: blue;
}
回答by NAND
I believe this works for your issue
我相信这适用于您的问题
body{
margin:0px;
}
#top-nav {
position: fixed;
top: 0;
height: 10vh;
width: 100%;
background-color: green;
}
#wrapper {
width: 100%;
background-color: #fff;
}
#side-nav {
float:left;
width: 250px;
height: 90vh;
overflow-y: scroll;
background-color: red;
}
#content-wrapper {
margin: 10vh 0 0 250px;
padding: 0 30px;
overflow-y: scroll;
background-color: blue;
height:90vh;
}
