側邊欄，可以滾動，但主要內容固定

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/