基于窗口高度的固定位置的按钮
问题描述：
我正在尝试在下面创建一个带有一些项目（复选框）和固定按钮的侧栏。基于窗口高度的固定位置的按钮
该按钮务必立即在最后一个复选框下方（不在侧栏底部），所以如果我减小窗口（高度）或者我有全屏，那么按钮仍然保持在同一位置（so它必须跟随最后一个复选框的高度）
如何使用基本的html/css构建而不使用javascript或函数来计算侧栏高度？
<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/ 正如你可以看到，如果我减少浏览器窗口的高度，我看不到按钮。我的目标是在最后一个复选框中每次都看到按钮
答
小提琴链接：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>
答
这是您需要的吗？
.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>
请发表您的代码。 – codesayan
你到目前为止尝试过什么？你的代码在哪里？ –
用代码更新问题 – razer90