web-dev-qa-db-ja.com

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

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

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

これを達成するためのよりスマートな方法はありますか？ありがとう！

csssidebar
26
Jakemmarsh

コンテンツ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/

33
Daniel

代替手段は次のとおりです。 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;
}
19
Evan Mosseri

2行のみのCSS行を使用する別の代替方法を次に示します。

.sidebar { position: sticky; top: 0; }

そしてクレジットはこれに行きます post 。

here でコードを試すこともできます。

0
user11105413