html - 如何使按钮和复选框固定在 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>