Question

我正在制作一个通讯应用程序，所以就像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>

预先感谢

Answer 1

如果您已经使用position-absolute（对于您的情况是正确的position-relative，则想删除fixed-bottom和position: fixed类。

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

Answer 2

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

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

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

2 个答案: