在前端设计中正确设置侧边栏

【问题标题】：Setting properly sidebar in frontend design在前端设计中正确设置侧边栏
【发布时间】：2015-05-21 04:57:33
【问题描述】：

我一直在尝试制作网站布局，但我根本做不到。我无法发布图片本身，因为我没有足够的声誉。

我的侧边栏应该是固定的，只要我垂直滚动就可以保留。旁边应该是页面主要内容的区域，可以垂直滚动。

现在我在这里看到了几个类似的问题，但似乎没有什么对我有用，因为当我缩放窗口时，它只是搞砸了。那么我该怎么做呢？列会有帮助吗？我应该有什么div？他们的 CSS 代码是什么？

【问题讨论】：

欢迎来到 Stack Overflow。为了让我们能够为您提供帮助，请您将代码连同您的问题一起发布。
或者更好的是，在JSFiddle 中重现您的问题。

标签： html css layout responsive-design sidebar

【解决方案1】：

在这个例子中，我使用position: absolute 来定位元素。

(Demo with filler text)

*,*::before,*::after {
  box-sizing: border-box;
}
html,body {
  margin: 0px;
  padding: 0px;
  position: relative;
  height: 100%;
}
.left {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 225px;
  background: rgb(50, 150, 250);
}
.right {
  position: absolute;
  top: 0;
  left: 225px;
  right: 0;
  bottom: 0;
  background: rgb(235, 245, 255);
  overflow: auto;
}

<div class="left">
    /* Side bar */
</div>
<div class="right">
    /* Content */
</div>

【讨论】：