私はこの設計を達成しようとしています: サイドバーは固定されますが、右側(メインコンテンツ)は垂直にスクロールします(ユーザーのブラウザーウィンドウが小さい場合は潜在的に水平にスクロールします)。これを達成する最良の方法は何ですか?
200pxの固定幅でサイドバーを「固定」しようとしましたが、メインコンテンツの余白は200pxになりました。ただし、ユーザーのブラウザがメインコンテンツよりも小さい場合、ユーザーが水平方向にスクロールしようとすると、サイドバーはすべてのコンテンツと重なります。
これを達成するためのよりスマートな方法はありますか?ありがとう!
コンテンツ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/
代替手段は次のとおりです。 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;
}