两个div独立滚动

Question

我需要帮助才能使这两个<div>(#side-nav和#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>.

我很快在这里写笔:

http://codepen.io/blizqery/pen/QbZzRN

谢谢!

Answer 1

检查一下:http://codepen.io/anon/pen/xGyMjM

您需要将height设置为content-wrapper,并设置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;
}