侧边栏，可以滚动，但主要内容固定

Question

我试图创建一个可以滚动的侧栏，但右侧的主要内容是固定的（不滚动）。

但是，当我尝试解决它不工作，所以这里是一个例子

HTML

<div id="container"> 
    <div id="outer-wrapper" class="is-open"> 
     <div id="inner-wrapper"> 
     </div> 
     <div id="sidebar"> 
     </div> 
    </div> 
</div> 

CSS

#sidebar { 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: -80%; 
    width: 80%; 
} 

.is-open { 
    //expose the sidebar by translating the wrapper 
    -webkit-transform: translateX(80%); 
    transform: translateX(80%); 
} 

#container { 
    //disables horizontal scroll 
    overflow: hidden; 
} 

这里是小提琴是可能有助于测试 https://jsfiddle.net/minheq/tn2no1o6/3/

请问，对此有何建议？

Answer 1

像这样的事情？

body { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.container, .wrapper { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.content { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 0; 
 
    background: #ddd; 
 
    padding: 10px; 
 
    padding-left: 230px; 
 
} 
 
.sidebar { 
 
    width: 200px; 
 
    height: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    padding: 10px; 
 
    background: #849; 
 
    overflow: auto; 
 
} 
 
.sidebar-content { 
 
    width: 100%; 
 
    height: 600px; 
 
    background: #994; 
 
    z-index: 1; 
 
}

<div class="container"> 
 
    <div class="wrapper"> 
 
    <div class="content">Lorem ipsum dolor</div> 
 
    <div class="sidebar"> 
 
     <div class="sidebar-content">Amet dolor ipsum</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

#content{ 
 
    width: 70%; 
 
    margin: 0; 
 
} 
 

 
.one{ 
 
    height: 80px; 
 
    width: 100%; 
 
    background-color:red; 
 
    margin: 0; 
 
} 
 

 
.two{ 
 
    height: 80px; 
 
    width: 100%; 
 
    background-color:green; 
 
    margin: 0; 
 
} 
 

 
#sidebar{ 
 
    width: 30%; 
 
    height: 250px; 
 
    background-color: blue; 
 
    top: 0; 
 
    right: 0; 
 
    position: fixed; 
 
} 
 

 
body, html{ 
 
    margin: 0; 
 
}

<div id="content"> 
 
    <div class="one"></div> 
 
    <div class="two"></div> 
 
    <div class="one"></div> 
 
    <div class="two"></div> 
 
    <div class="one"></div> 
 
    <div class="two"></div> 
 
    <div class="one"></div> 
 
    <div class="two"></div> 
 
</div> 
 
<div id="sidebar"> 
 
    
 
</div>

Answer 3

让你侧边栏display:fixed和overflow-y: auto。 DIV的主要内容需要比边栏的宽度更大。

<div class="sidebar"> 
    ... sidebar stuff here ... 
</div> 

<div class="mainContent"> 
    ... main content stuff here ... 
</div> 

而且你的CSS：

body { 
    padding: 0; 
    margin:0; 
} 

div.sidebar { 
    padding: 10px; 
    display: block; 
    width: 150px; 
    position: fixed; 
    height: 100vh; 
    overflow-y: auto; 
    left: 0; 
    top: 0; 
} 

div.mainContent { 
    margin-left: 180px; 
    padding: 10px; 
} 

这将使得侧边栏和彼此独立的主要内容滚动，只有当内容超过其容器的高度。

小提琴：http://jsfiddle.net/kph8jxLv/