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

Question

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

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

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

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>

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

有一个小提琴：http://jsfiddle.net/djwave28/JZ52u/

---

编辑：响应边栏

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

例：

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

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

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

Answer 3

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

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

并且归功于这个post。

您还可以在here上试验代码。