我需要帮助来制作这两个<div>
's (#side-nav
and #content-wrapper
) 独立滚动,
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:
#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;
}
现在如果我滚动#side-nav
到最后或顶部,#content-wrapper
也会滚动。#side-nav
即使没有那么多,也必须保持整页高度并固定<li>
's.
我很快就在这里制作了笔:
http://codepen.io/blizqery/pen/QbZzRN http://codepen.io/blizqery/pen/QbZzRN
Thanks!
检查一下:http://codepen.io/anon/pen/xGyMjM http://codepen.io/anon/pen/xGyMjM
您需要设置内容包装器的高度,并设置左侧、右侧和顶部。
#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;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)