流体宽度的静态边栏

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>