Question

我创建了一个HTML模板，其中我将侧边栏设置为position: fixed;但是当我将浏览器最小化到比页面设置的宽度更小时，当用户查看sidescrolls时，主要内容会在侧边栏下方漂移

是否有任何修复方法可以将整个容器设置为侧栏并且主要内容就像一个固定块一样？

<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;
}

Answer 1

您可以使用简单的媒体查询

绝对将侧边栏放在狭窄的屏幕上

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

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

css如何防止内容在固定位置区域下漂移？

1 个答案: