如何使按鈕和複選框固定在DIV底部

Question

如何讓我的按鈕和複選框固定在我的div底部。我能夠讓我的可滾動工作。我的問題是按鈕和複選框不固定在底部。

所以，當我用文本填充div時，文本會溢出按鈕和複選框，但我怎樣才能讓文本被包含在scroll-able中而不會溢出按鈕和複選框？

#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

請注意，我已經加入圍繞兩個互動元素的包裝股利。 讓我知道如果你在標記中有任何限制，不允許你將它們包裝在一個容器中，我們會在這種情況下找到另一個解決方案。

#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和button元素出你的.paneldiv：

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