DIVの下部にボタンとチェックボックスを固定する方法

Question

私のボタンの下にボタンとチェックボックスを固定する方法を教えてください。私はスクロール可能な仕事を得ることができます。私の問題はボタンとチェックボックスが底に固定されていないことです。

したがって、divでテキストを設定すると、テキストがボタンとチェックボックスでオーバーフローしますが、テキストをスクロール可能な状態にしてボタンやチェックボックスをオーバーフローさせないようにするにはどうすればよいですか？

#chk { 
 
    float: left 
 
} 
 

 
.btn { 
 
    float: right 
 
}

<div style="height:40%; overflow: scroll;" class="panel" id="panel"> 
 

 
<!--inner part of the div which contains the text (scrollable is applied here) --> 
 

 
    <input id="chk" type="checkbox" /> <!-- should be on the left bottom of the div --> 
 

 
    <button type="submit" class="btn">Button</button> <!--should be on the right bottom of the div (opposite the checkbox)--> 
 

 
</div>

Answer 1

私は2つのインタラクティブな要素の周囲にラッパーdiv要素を追加したノート。 マークアップでコンテナにラップすることができない制限がある場合はお知らせください。その場合は別の解決方法があります。

#panel { 
 
    position:relative; 
 
    padding-bottom: 2rem; 
 
} 
 
    
 
.panel-bottom { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 95%; /* to be resized as it suits you */ 
 
    background-color: white; 
 
    height: 2rem; 
 
    padding: .5rem; 
 
} 
 
#chk { 
 
    position: absolute; 
 
    left: 0; 
 
} 
 
.btn { 
 
    position: absolute; 
 
    right: 0; 
 
}

<div style="height:40%; overflow: scroll;" class="panel" id="panel"> 
 

 
inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here) 
 

 

 
    <div class="panel-bottom"> 
 
    <input id="chk" type="checkbox" /> 
 
    <button type="submit" class="btn">Button</button> 
 
    </div> 
 

 
</div>

Answer 2

私は、これはあなたが探しているものであると思います：

inputとあなたの.paneldivのうちbutton要素を保持：

<div style="height:40%; overflow-y: scroll;" class="panel" id="panel"> 

<!--inner part of the div which contains the text (scrollable is applied here) --> 

</div> 
<div id = "inpAndBtn"> 
    <input id="chk" type="checkbox" /> <!-- should be on the left bottom of the div --> 

    <button type="submit" class="btn">Button</button> <!--should be on the right bottom of the div (opposite the checkbox)--> 
</div> 

そして追加次のスタイル：

body { 
    height: 100vh; 
} 

#chk { 
    float: left 
} 

.btn { 
    float: right 
} 

Answer 3

親コンテナは相対的な位置に配置する必要があります。

<div style="height:300px;position:relative;" class="panel" id="panel"> 
    <div style="height:250px; overflow-y: scroll;"> 
<!--inner part of the div which contains the text (scrollable is applied here) --> 
    <div> 
<div style="position:absolute;bottom:0;height:50px;" > 
    <input id="chk" type="checkbox" /> <!-- should be on the left bottom of the div --> 
    <button type="submit" class="btn">Button</button> <!--should be on the right bottom of the div (opposite the checkbox)--> 
    </div> 
</div>