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

I'm trying to accomplish this design: Where the sidebar will be fixed, but the right side (the main content) will scroll vertically (and potentially horizontally if the user's browser window is smaller). What is the best way to achieve this?

我尝试将侧边栏“固定”为 200px 的固定宽度，然后主要内容的 margin-left 为 200px。但是，如果用户的浏览器小于主要内容，则当用户尝试水平滚动时，侧边栏会覆盖所有内容。

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

使用内容 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/ http://jsfiddle.net/djwave28/JZ52u/

编辑：响应式侧边栏

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

Example:

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

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