左侧为粘性侧边栏，右侧为可滚动内容的布局

Question

如何制作两栏布局，其中左栏是我的菜单并被锁定（粘滞？固定？）所以当您根据右栏中的内容高度垂直滚动时，菜单会保留。

第二件事，我想我必须使用 javascript for (vanilla, no jquery) 以便使列可调整大小。对于 css 我会使用 'cursor: col-resize' 但我不知道 JS。

.row {
  display: flex;
}

.column {
  flex: 50%;
  padding: 16px;
}

.one {
  background-color: tomato;
  min-height: 100%;
}

.two {
  background-color: #33a8ff;
  height: 5000px;
}

html,
body {
  height: 100%;
  margin: 0;
}

<div class="row">
  <div class="column one">
    <h2> column #1 </h2>
    <p>menu items</p>
  </div>
  <div class="column two">
    <h2>column #2</h2>
    <p> Some contents in column 2 </p>
  </div>
</div>

Here is a fiddle: https://jsfiddle.net/ojx1g64s/

Answer 1

您可以按照我下面的代码片段进行操作。两列都有 height: 100%;，右列有 overflow-y: auto 仅在必要时显示滚动条并滚动该列内的内容：

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
}
.row {
  display: flex;
  height: 100%;
  background-color: #33a8ff;
}

.column {
  flex: 50%;
  padding: 16px;
}

.one {
  background-color: tomato;
  height: 100%;
}

.two {
  height: 100%;
  overflow-y: auto;
}

<div class="row">
  <div class="column one">
    <h2> column #1 </h2>
    <p>menu items</p>
  </div>
  <div class="column two">
    <h2>column #2</h2>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
  </div>
</div>

Answer 2

您可以使用 position:sticky。但是为了看出区别，把侧边栏的高度设置小一点。

Note: position: sticky wouldn't work if one sidebar's parent, even if it's not a direct one, have its overflow set to a different value than the default one.

.row {
  display: flex;
}
.column {
  flex: 50%;
  padding: 16px;
}
.one {
  background-color: tomato;
  position: sticky;
  top: 0;
  height: min-content;
}
.two {
  background-color: #33a8ff;
  height: 5000px;
}

html,
body {
  margin: 0;
}

<div class="row">
  <div class="column one">
    <h2> column #1 </h2>
    <p>menu items</p>
  </div>
  <div class="column two">
    <h2>column #2</h2>
    <p> Some contents in column 2 </p>
  </div>
</div>

左侧为粘性侧边栏，右侧为可滚动内容的布局

Layout with sticky sidebar on the left and scrollable content on the right

html

javascript

css

flexbox