1

サイドバーを設定した HTML テンプレートを作成しましたposition: fixed;が、ブラウザを最小化してページの幅よりも狭くすると、ユーザーが横スクロールを表示すると、メイン コンテンツがサイドバーの下に移動します。

コンテナ全体をサイドバーとメイン コンテンツで 1 つの固定ブロックのように設定するための修正はありますか?

http://jsfiddle.net/vuj6t/2/

<body>
<div id="container">

<section id="sidebar">
<nav>
<ul>
<li><a href="/"></a></li>
<li><a href="/"></a></li>
<li><a href="/"></a></li>
</ul>
</nav>
</section>

<section id="stream">

<article>
</article>

<article>
</article>

<article>
</article>

</section>

</div>
</body>


body {
  height: 100%;
  overflow: auto;
  margin: 0;
  padding: 0;
  position: relative;
}

#container {
  margin: 0 auto;
  padding: 0;
  position: relative;
  width: 700px;
}

#sidebar {
  display: block;
  float: left;
  overflow: hidden;
  position: fixed;
  width: 200px;
}

#stream {
  float: right;
  margin: 0 0 0 210px;
  padding: 0;
  width: 490px;
}
4

1 に答える 1

1

次のような単純なメディアクエリを使用して、サイドバーを狭い画面に完全に配置できます

@media (max-width: 690px) {
  #sidebar { position:absolute; }
}

http://jsfiddle.net/vuj6t/3/

于 2013-05-05T01:08:56.160 に答える