Question

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

因此，当我用文本填充div时，文本会溢出按钮和复选框，但是如何使文本包含在滚动条中而不是溢出按钮和复选框？

＆＃13;

#chk {
  float: left
}

.btn {
  float: right
}

＆＃13;

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

＆＃13;

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>

Answer 2

我希望这就是你要找的东西：

将input和button元素保留在.panel div之外：

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

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

3 个答案: