基于窗口高度的固定位置的按钮答案

【问题标题】：button in fixed position based on window's height基于窗口高度的固定位置的按钮
【发布时间】：2017-11-13 23:07:44
【问题描述】：

我正在尝试用一些项目（复选框）和下面的固定按钮构建一个侧边栏。

按钮必须紧挨着最后一个复选框（而不是侧边栏的底部），所以如果我缩小窗口（高度）或者我有全屏，按钮必须仍然保持在相同的位置（所以它必须遵循最后一个复选框的高度）

如何在不使用 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/ 如您所见，如果我降低浏览器窗口的高度，我看不到按钮。我的目标是每次都在最后一个复选框下立即看到按钮

【问题讨论】：

请发布您的代码。
到目前为止您尝试过什么？你的代码在哪里？
用代码更新问题

标签： html css css-position fixed sidebar

【解决方案1】：

小提琴链接：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>

【讨论】：

【解决方案2】：

这是你需要的吗？

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

【讨论】：