流体の幅を持つ静的なサイドバー

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>