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

Question

我想要实现这个设计： 侧边栏将被固定，但右侧（即主内容）将垂直滚动（如果用户的浏览器窗口较小，则可能会水平滚动）。最好的方法是什么？ 我尝试让侧边栏使用固定宽度为200px的“fixed”方式，而主内容只需具有200px的左边距。但是，如果用户的浏览器比主内容更小，当用户尝试水平滚动时，侧边栏会重叠所有内容。 有没有更聪明的方法来实现这个？谢谢！

- Jakemmarsh

---

"Correctly"是一个主观形容词。对你来说正确的，可能不符合Google标准，但可能符合Facebook的样式指南。您能否用几个词定义您在标题中想要表达的内容？ - Soldeplata Saketos

Answer 1

使用 content 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>

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

试试看：http://jsfiddle.net/djwave28/JZ52u/

---

编辑：响应式侧边栏

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

例如：

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

这是另一个小把戏：http://jsfiddle.net/djwave28/JZ52u/363/

- Daniel

---

这基本上就是我最初的想法。问题是，当有任何水平滚动时，侧边栏会重叠在内容上。我想垂直滚动时需要固定侧边栏，但水平滚动时不需要。 - Jakemmarsh

@Zach - 我重新创建了这个演示，但它与上面的代码相同。 - Daniel

如果我们想要一个固定的侧边栏，但宽度可以灵活调整怎么办？ - sedflix

@iamSiddharthYadav - 你可以用百分比替换 .sidebar{width} 和 .content{margin-left}。这样它就会变得流动起来。个人建议使用媒体查询来控制宽度，从而控制内容。请查看我的编辑和 fiddle。 - Daniel

@TomasJansson - 当使用“left”时，内容div不会自适应屏幕宽度。相反，它将在右侧突出。尝试在fiddle中进行此操作，您会注意到这一点。使用margin-left，内容div的宽度将自适应。 - Daniel

Answer 2

这里有一个替代方案：http://jsfiddle.net/BoyWonder/8mVQX/embedded/result/

body{
    padding-left:200px;
    margin:0;
}
div#sidebar{
   position:fixed;
   height:100%;
   width:200px; 
   top:0;
   left:0;
   background:grey; 
}
div#content{
    background:black;
    width:100%;
    height:1600px;
}

- Evan Mosseri

---

当侧边栏上有太多对象时，这完全没有用。请查看您自己的扩展代码：http://jsfiddle.net/8mVQX/401/ - Soldeplata Saketos

“完全没用”似乎有点夸张了，侧边栏上简单添加“overflow-y: auto”就可以解决这个问题。 - seBaka28

Answer 3

这里有另一种仅使用两行CSS的替代方法

.sidebar { position: sticky; top: 0; }

这个帖子提供了灵感。

你也可以在这里尝试代码。

- user11105413