两个独立滚动的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

你需要给content-wrapper设置height，同时设置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;
}

Answer 2

我相信这对您的问题有效

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

两个独立滚动的div

Two divs scrolling independently

html

css

scroll

HTML:

CSS: