如何正確實現固定側欄？

Question

我試圖完成這個設計： 側欄將固定，但右側（主要內容）將垂直滾動（如果用戶的瀏覽器窗口較小，可能會水平）。達到此目的的最佳方法是什麼？

我試圖使側邊欄是「固定」用的200像素一個固定的寬度，然後將主內容只是有一個利潤率左的200像素。但是，如果用戶的瀏覽器比主內容小，則當用戶嘗試水平滾動時，側欄會覆蓋所有內容。

有一個更聰明的方式來實現這一目標？謝謝！

Answer 1

使用內容的div作爲你的頁面的容器。

.sidebar { 
    position: fixed; 
    width: 200px; 
    height: 400px; 
    background: #000; 
} 
.content { 
    margin-left: 200px; 
    height: 500px; 
    width: auto; 
    position: relative; 
    background: #f00; 
    overflow: auto; 
    z-index: 1; 
} 
.info { 
    width: 1440px; 
    height: 300px; 
    position: relative; 
    background: #f55; 
} 

<div class="sidebar"></div> 
<div class="content"> 
    <div class="info"></div> 
</div> 

您的內容需要是放置頁面的容器。這裏的值是我的測試，看看我是否正確。如果您的寬度和高度超過了您爲內容設置的值，則會出現滾動條。

有一個小提琴：http://jsfiddle.net/djwave28/JZ52u/

---

編輯：響應側邊欄

爲了有一個固定的響應側邊欄，只需添加一個媒體查詢。

實施例：

@media (min-width:600px) { 
    .sidebar { 
    width: 250px; 
    } 
    .content { 
    margin-left: 250px; 
    } 
} 

下面是另一個小提琴：http://jsfiddle.net/djwave28/JZ52u/363/

Answer 2

下面是一個替代：http://jsfiddle.net/BoyWonder/8mVQX/embedded/result/

body{ 
    padding-left:200px; 
    margin:0; 
} 
div#sidebar{ 
    position:fixed; 
    height:100%; 
    width:200px; 
    top:0; 
    left:0; 
    background:grey; 
} 
div#content{ 
    background:black; 
    width:100%; 
    height:1600px; 
}