Jasper Peters Jasper Peters - 2 months ago 6
CSS Question

Glue div to bottom of other div (not bottom of window)

So I want a div to always be on the bottom of another div it's in.
I've used bottom:0, position: absolute. This works as long as the window is the same size as the main div (which is the size of the windows too), but the main div has a min-height set, when the window gets smaller then this height the div start moving up with the bottom of the window.
vertical-align also doesn't work for this purpose as it glues it to the bottom of the other divs in the main div, but that results in it not being in the bottom of the main div, which is my goal.

How can I achieve this?

Answer

You can use flexbox for that:

.parent {
  width: 50%;
  height: 200px;
  border: 1px solid grey;
  margin: 1em auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.child {
  width: 60%;
  height: 50px;
  background: rebeccapurple;
  margin-top: auto;
}
<div class="parent">
  <div class="child"></div>
</div>