css - 如何正确实现固定侧边栏？

Question

我正在努力完成这个设计: 侧边栏将固定，但右侧(主要内容)将垂直滚动(如果用户的浏览器窗口较小，则可能水平滚动)。实现这一目标的最佳方法是什么？

我试着让侧边栏“固定”为 200 像素的固定宽度，然后主要内容只有 200 像素的边距。但是，如果用户的浏览器比主要内容小，则边栏会在用户尝试水平滚动时覆盖所有内容。

有没有更聪明的方法来实现这一目标？谢谢!

Answer 1

使用内容 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>

您的内容将需要成为放置页面的容器。这里的值是我的测试，看看我在这方面是否正确。如果您的宽度和高度超过您为内容设置的值，则会出现滚动条。

有一个 fiddle :http://jsfiddle.net/djwave28/JZ52u/

---

编辑:响应式侧边栏

要有一个响应式的固定侧边栏，只需添加一个媒体查询。

例子:

@media (min-width:600px) {
   .sidebar {
     width: 250px;
   }
   .content {
     margin-left: 250px;
   }
 }

这是另一个 fiddle :http://jsfiddle.net/djwave28/JZ52u/363/