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

Question

I am making a messaging app so it's just like whatsapp. I am making a parent div which contains messages. The child div contains the text field and send button. I want to position the child div such that when you scroll through messages the text field and the button remain at the bottom of the parent container.I have already used bootstrap 4's fixed bottom. But It doesn't work...

I have also seen other stack flow answers which say: To put position: relative; in the parent and position: absolute in the child div. But this also doesn't work.

This is my parent container..

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

This is my child container i.e 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>

Thanks in advance

Possible duplicate of [Position element at bottom of div](https://stackoverflow.com/questions/33621120/position-element-at-bottom-of-div) — Daniel Beck, Dec 05 '18 at 14:45
You might want to read about CSS regarding `position` - depending on your use-case, you might be interested in either the `absolute` or `fixed` position values. — dokgu, Dec 05 '18 at 14:51
After reading only I have used position attribute and their combinations — user5910213, Dec 05 '18 at 14:54
You need to put your child container inside the parent and remove the position-absolute from the child and just increase the height of your parent so you can scroll. https://codepen.io/anon/pen/pQXgzr — Julian Espinosa, Dec 05 '18 at 14:59
It doesn't do it @JulianEspinosa. If I do that the child container will stick to the bottom of the window not the parent div. — user5910213, Dec 05 '18 at 15:03

Victoria Le · Answer 1 · 2018-12-05T15:30:33.360

You would want to remove position-absolute and position-relative class if you already use fixed-bottom (is position: fixed which is correct in your case).

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

score 0 · Answer 2 · answered Dec 05 '18 at 15:48

0

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

This should help you. https://stackoverflow.com/users/1489834/jay-bee-why

answered Dec 05 '18 at 15:48

Remmy

11
2

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

2 Answers2