两个div独立滚动 [英] Two divs scrolling independently

问题描述

我需要帮助来制作这两个< div> 的（＃side-nav 和＃content-wrapper ）独立滚动，

I need help to make these two <div>'s (#side-nav and #content-wrapper) to scroll independently,

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

现在，如果我滚动＃side-nav 到结尾或顶部，＃content-wrapper 也会滚动。 ＃side-nav 必须保持整页高度并固定，即使< li> 。

now if I scroll the #side-nav to the end or top, #content-wrapper will scroll too. #side-nav has to stay full-page height and fixed even if there is not that many <li>'s.

我很快就在这里放笔了：

I've quickly made pen here:

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

谢谢！

推荐答案

检查此内容： http://codepen.io/anon/pen/xGyMjM

您需要将content-wrapper设置为高度，并设置左侧，正确和

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

这篇关于两个div独立滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！