按钮基于 window 的高度固定位置

Question

我正在尝试构建一个侧边栏，其中包含一些项目（复选框）和下方的固定按钮。

按钮必须紧挨着最后一个复选框的下方（而不是在侧边栏的底部），所以如果我减小 window（高度）或者我有全屏，按钮必须仍然保留在相同的位置（所以它必须跟随最后一个复选框的高度）

如何在不使用 javascript 或计算侧边栏高度的函数的情况下使用基本 html/css 构建它？

<div style="float: left; width: 200px; height: auto; overflow: scroll">
SIDEBAR
<p><input type="checkbox"/>Item 1</p>
<p><input type="checkbox"/>Item 2</p>
<p><input type="checkbox"/>Item 3</p>
<p><input type="checkbox"/>Item 4</p>
<p><input type="checkbox"/>Item 5</p>
<p><input type="checkbox"/>Item 6</p>
<button style="position: fixed">
GO!
</button>
</div>
<div style="float: left; width: 400px">
CONTENT
</div>

我正在尝试使用固定高度和溢出滚动。 https://jsfiddle.net/28224v2j/ 如您所见，如果我降低浏览器 window 的高度，我将看不到按钮。我的目标是每次都看到最后一个复选框下方的按钮

Answer 1

这是你需要的吗？

.sidebar {
  width: 200px;
  height: auto;
  overflow: scroll;
  float: left;
  display: flex;
  flex-flow: column;
}

.content {
  float: left;
  width: 400px;
}

.sidebar p {
  margin: 0;
  margin-bottom: 5px;
}

<div class="sidebar">
  <p>SIDEBAR</p>
  <p><input type="checkbox" />Item 1</p>
  <p><input type="checkbox" />Item 2</p>
  <p><input type="checkbox" />Item 3</p>
  <p><input type="checkbox" />Item 4</p>
  <p><input type="checkbox" />Item 5</p>
  <p><input type="checkbox" />Item 6</p>
  <button>GO!</button>
</div>
<div class="content">
  <p>CONTENT</p>
</div>

Answer 2

Fiddle link: https://jsfiddle.net/ash06229/28224v2j/1/

body {
  margin: 0;
}

body * {
  box-sizing: border-box;
}
.side-bar {
  height: 100vh;
  float: left;
}

.side-bar > .check-box-group {
  max-height: calc(100vh - 30px);
  overflow: auto;
}

.side-bar > button {
  height: 30px;
}

.content {
  float: left;
}

<div class="side-bar">
  <div class="check-box-group">
    SIDEBAR
    <p><input type="checkbox"/>Item 1</p>
    <p><input type="checkbox"/>Item 2</p>
    <p><input type="checkbox"/>Item 3</p>
    <p><input type="checkbox"/>Item 4</p>
    <p><input type="checkbox"/>Item 5</p>
    <p><input type="checkbox"/>Item 6</p>
  </div>
  <button>GO!</button>
</div>
<div class="content">CONTENT</div>

按钮基于 window 的高度固定位置

button in fixed position based on window's height

html

css

sidebar

fixed

css-position