1

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

是否有任何解决方法可以将带有侧边栏的整个容器和主要内容设置为单个固定块？

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 回答