流體內容固定側欄

Question

我必須切片需要全寬和全高（不滾動）的網站。 它的結構非常簡單：主體內部有一個20px邊框（內部）和一個內容，其中將是一個水平滑塊（見下圖）。

我的問題是，你有什麼建議我設置側邊欄寬度？ 你會推薦我使用固定寬度的側邊欄和jQuery來計算內容的寬度，或者更好地使用側邊欄寬度和百分比內容？ 如果有更好的方法讓我知道。

注：我開發它在SCSS（CSS3）和HTML5，它也應該與talbets

Answer 1

您可以使用%width爲您的側邊欄，但也提供min-width和max-width值。東西like this。

代碼演示

---

相關HTML：

<div class='sidebar'></div> 
<div class='content-wrp'> 
    <ul class='content'> 
     <li class='slice'></li> 
     <!-- and so on --> 
    </ul> 
</div> 

相關CSS：

html, body, .sidebar, .content-wrp, .content, .slice { 
    box-sizing: border-box; 
    margin: 0; 
    height: 100%; 
} 
body { border: solid 20px lightblue; } 
.sidebar { 
    float: left; 
    min-width: 10em; width: 20%; max-width: 32em; 
} 
.content-wrp { 
    overflow-x: scroll; overflow-y: hidden; 
    padding-bottom: 1em; 
} 
.content { width: 4000px; } 

Answer 2

這是一個相當常見的兼容問題 - 一列需要有一個固定的寬度和其他需要響應。

文章：

http://css.flepstudio.org/en/css-box-model/1-column-fixed-1-column-fluid.html

提供了兩個解決方案，一個基於絕對定位和其他上浮動。