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

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

最佳答案

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

关于html - 如何使按钮和复选框固定在 DIV 底部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47364929/