固定サイドバーを正しく実装する方法は？

Question

私はこのデザインを達成しようとしています： サイドバーは固定されますが、右側（メインコンテンツ）は垂直方向にスクロールされます（ユーザーのブラウザウィンドウが小さい場合は水平方向にスクロールされます）。これを達成する最良の方法は何ですか？

サイドバーを200pxの固定幅で「固定」にしてから、メインコンテンツに200pxの余白が残っているようにしました。ただし、ユーザーのブラウザがメインコンテンツよりも小さい場合、ユーザーが水平方向にスクロールしようとすると、サイドバーはすべてのコンテンツに重複します。

これを実現するスマートな方法はありますか？ありがとう！

Answer 1

ページのコンテナとしてコンテンツdivを使用します。

.sidebar { 
    position: fixed; 
    width: 200px; 
    height: 400px; 
    background: #000; 
} 
.content { 
    margin-left: 200px; 
    height: 500px; 
    width: auto; 
    position: relative; 
    background: #f00; 
    overflow: auto; 
    z-index: 1; 
} 
.info { 
    width: 1440px; 
    height: 300px; 
    position: relative; 
    background: #f55; 
} 

<div class="sidebar"></div> 
<div class="content"> 
    <div class="info"></div> 
</div> 

あなたのコンテンツは、ページを置くための容器である必要があります。ここでの値は、私がこれで正しいだかどうかを確認するために私のテストです。幅と高さがコンテンツに設定した値を超えると、スクロールバーが表示されます。 http://jsfiddle.net/djwave28/JZ52u/

---

編集：応答性のサイドバー

単にメディアクエリを追加し、応答性の固定のサイドバーを持っている

はフィドルを持っています。

例：

@media (min-width:600px) { 
    .sidebar { 
    width: 250px; 
    } 
    .content { 
    margin-left: 250px; 
    } 
} 

ここで別のフィドルです：ここでhttp://jsfiddle.net/djwave28/JZ52u/363/

Answer 2

は、代替です：http://jsfiddle.net/BoyWonder/8mVQX/embedded/result/

body{ 
    padding-left:200px; 
    margin:0; 
} 
div#sidebar{ 
    position:fixed; 
    height:100%; 
    width:200px; 
    top:0; 
    left:0; 
    background:grey; 
} 
div#content{ 
    background:black; 
    width:100%; 
    height:1600px; 
}