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

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>