ウィンドウの高さに基づいて固定位置にあるボタン

Question

私はいくつかの項目（チェックボックス）と下の固定ボタンでサイドバーを構築しようとしています。

ボタンは最後のチェックボックスのすぐ下にある必要があります（サイドバーの下部にはありません）。そのため、ウィンドウ（高さ）を縮小したり、フルスクリーンを表示しても、ボタンは同じ位置最後のチェックボックスの高さに従わなければならない）

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/ 私はブラウザのウィンドウの高さを減らすことがわかりますが、ボタンが見えません。私の目標は、最後のチェックボックスの直後に毎回ボタンを表示することです

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

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