Two divs scrolling independently

Question

I need help to make these two

\'s (#side-nav and #content-wrapper) to scroll independently,

HTML:

相关标签:

Answer 1

Check this: 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;
}

Answer 2

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