如何使按钮和复选框固定在DIV的底部

Question

如何将我的按钮和复选框固定在div的底部.我也可以使用我的滚动工作.我的问题是按钮,复选框没有固定在底部.

因此,当我用文本填充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

请注意,我在两个交互元素周围添加了一个包装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>