サイドバーを設定した HTML テンプレートを作成しましたposition: fixed;
が、ブラウザを最小化してページの幅よりも狭くすると、ユーザーが横スクロールを表示すると、メイン コンテンツがサイドバーの下に移動します。
コンテナ全体をサイドバーとメイン コンテンツで 1 つの固定ブロックのように設定するための修正はありますか?
<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;
}