在前端设计中合理设置侧边栏

Question

我一直在尝试做一个网站布局，但我就是做不到。我不能发布图片本身，因为我没有足够的声誉。

我有侧栏，应该是固定的，并留下来，只要我垂直滚动。旁边应该是页面的主要内容区域，这是垂直滚动的。

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

Answer 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>

​