html - 具有流动宽度的静态侧边栏

Question

我遇到了一个我不太确定如何解决的复杂问题。我有一个侧边栏和一个主要区域。侧边栏的宽度为 25%，最大宽度为 350px。其余部分由主要区域(宽度为:auto)占据。侧边栏需要有 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>