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

【问题标题】：How to implement fixed sidebar correctly?如何正确实现固定侧边栏？
【发布时间】：2013-03-13 12:25:03
【问题描述】：

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

我尝试将侧边栏“固定”为 200 像素的固定宽度，然后主要内容的左侧边距为 200 像素。但是，如果用户的浏览器小于主要内容，则边栏会在用户尝试水平滚动时与所有内容重叠。

有没有更聪明的方法来实现这一点？谢谢！

【问题讨论】：

“正确地”是一个主观形容词。对你来说正确的东西，对于 Google 标准可能不正确，但对于 Facebook 的风格指南可能是正确的。你能用几句话来定义你想要的标题吗？

标签： css sidebar

【解决方案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>

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

拉小提琴：http://jsfiddle.net/djwave28/JZ52u/

编辑：响应式侧边栏

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

例子：

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

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

【讨论】：

这和我原来的差不多。问题是，当有任何水平滚动时，侧边栏会与内容重叠。我想我需要在垂直滚动时固定侧边栏，但在水平滚动时不需要。
@Zach - 我重新创建了小提琴，但它与上面的代码相同。
如果我们想要一个宽度灵活的固定侧栏怎么办？？
@iamSiddharthYadav - 您可以将 .sidebar{width} 和 .content{margin-left} 替换为百分比。有了它，它就会变得流畅。就我个人而言，我会使用媒体查询来控制宽度并控制里面的内容。查看我的编辑和小提琴。
@TomasJansson - 当使用“left”时，contet div 不会适应屏幕宽度。相反，它会突出在右侧。尝试在小提琴中执行此操作，您会注意到它。使用 margin-left，内容 div 的宽度将适应。

【解决方案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;
}

【讨论】：

当侧边栏有太多对象时，这完全没用。查看您自己的扩展代码：jsfiddle.net/8mVQX/401
@SoldeplataSaketos 完全没用似乎有点夸大其词，侧边栏上的一个简单的“溢出-y：自动”解决了这个问题。

【解决方案3】：

这是另一种选择，只使用两条 CSS 行

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

这归功于post。

您还可以通过here 试验代码。

【讨论】：