如何将一个 div 放在另一个 div 的底部。这样当父 div 滚动时，子 div 不会移动答案

【问题标题】：How to place a div at the bottom of another div. Such that when the parent div is scrolled the child div doesn't move如何将一个 div 放在另一个 div 的底部。这样当父 div 滚动时，子 div 不会移动
【发布时间】：2018-12-05 23:48:39
【问题描述】：

我正在制作一个消息应用程序，所以它就像 whatsapp 一样。我正在制作一个包含消息的父 div。子 div 包含文本字段和发送按钮。我想定位子 div，这样当您滚动消息时，文本字段和按钮保持在父容器的底部。我已经使用了 bootstrap 4 的固定底部。但它不起作用......

我还看到其他堆栈流答案说：放置位置：相对；在父级和位置：绝对在子 div 中。但这也行不通。

这是我的父容器..

<div class="container justify-content-center w-50 position-relative" style="height: 400px; overflow-y: auto; ">
<app-message-container></app-message-container>
</div>

这是我的子容器，即 app-message-container..

<div class="container d-flex fixed-bottom position-absolute">
<input class="form-control" type="text" placeholder="Enter Text">
<button class="btn btn-success">Send</button>
</div>
<p>Alias inventore doloremque inceptos soluta, aliqua quaerat totam 
sccusantium quibusdam dolor vestibulum. Class? Non sapiente exercitation 
libero quaerat hic sociis voluptas laboris! Interdum nemo mattis posuere 
fermentum mus auctor iaculis adipisci? Blandit.</p>

提前致谢

【问题讨论】：

请在您的问题中包含代码
把你的代码放在这里以获得解决方案/建议
Position element at bottom of div的可能重复
我已经用代码更新了问题。
您可能想了解有关 position 的 CSS - 根据您的用例，您可能对 absolute 或 fixed 位置值感兴趣。

标签： html css bootstrap-4

【解决方案1】：

如果您已经使用 fixed-bottom（在您的情况下是正确的 position: fixed），您可能希望删除 position-absolute 和 position-relative 类。

<div class="container d-flex fixed-bottom">

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container justify-content-center w-50" style="height: 400px; overflow-y: auto; ">  
  <div class="container d-flex fixed-bottom">
     <input class="form-control" type="text" placeholder="Enter Text">
     <button class="btn btn-success">Send</button>
  </div>
  <p>Alias inventore doloremque inceptos soluta, aliqua quaerat totam 
  sccusantium quibusdam dolor vestibulum. Class? Non sapiente exercitation 
  libero quaerat hic sociis voluptas laboris! Interdum nemo mattis posuere 
  fermentum mus auctor iaculis adipisci? Blandit.</p>
</div>

【讨论】：

【解决方案2】：

Fixed position div inside pos:relative & overflow-y:scroll

这应该对您有所帮助。 https://stackoverflow.com/users/1489834/jay-bee-why

【讨论】：