29

私はこのデザインを達成しようとしています: 設計例 サイドバーは固定されますが、右側 (メイン コンテンツ) は垂直方向にスクロールします (ユーザーのブラウザー ウィンドウが小さい場合は水平方向にスクロールする可能性もあります)。これを達成するための最良の方法は何ですか？

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

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

4

3 に答える 3

36

ページのコンテナとして content 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/

于 2013-03-23T19:05:40.303 に答える
21

代替案は次のとおりです。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;
}
于 2013-03-24T01:02:48.490 に答える
5

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

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

クレジットはこの投稿に送られます。

こちらのコードを試すこともできます。

于 2019-04-04T05:50:01.660 に答える