流體寬度的靜態邊欄

Question

我遇到了一個令人困惑的問題，我不太清楚如何解決。我有一個側欄和一個主要區域。側邊欄的寬度爲25％，最大寬度爲350px。其餘由主區域（寬度：自動）佔用。無論用戶滾動多少，邊欄都需要有100％的高度，並始終保持在原來的位置。

如果我有一個固定寬度的側邊欄，我可以做這樣的事情（demo here）：

div#sidebar { 
    width: 350px; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    height: 100% 
} 

div#main { 
    width: auto; 
    margin-left: 350px; 
} 

然而，因爲我不知道我的側邊欄有多寬將是你，我不會知道要在我的主要內容區域添加多少保證金。

任何想法？

Answer 1

我認爲這是你在找什麼，請看demo fiddle。

CSS：

html, 
body { 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    overflow: hidden; 
} 
#sidebar { 
    float: left; 
    width: 25%; 
    max-width: 350px; 
    height: 100%; 
    overflow: hidden; 
} 
#main { 
    overflow-x: hidden; 
    overflow-y: auto; 
    height: 100%; 
} 

HTML：

<div id="sidebar"> 

</div> 
<div id="main"> 

</div>