How do I fix a div at the bottom of the parent div?

How do I fix a div at the bottom of the parent div?
0.0 0

#1

https://codepen.io/forestfire/pen/eexdpL?editors=1100
So this is what I’m apparently try to do. The green div will have random text and so its height will vary. The blue div is of fixed height and is supposed to be at the bottom of the parent div(the red one) at all times.
The green and the red divs are resizeable with some minimum height. The green div will expands, taking up the empty space between itself and the blue one down below, till it touches the blue div and then expand along with the red div. I cant seem to find out how to get the blue one at its place. I tried using position:absolute and then bottom: 0px but then when the green div expands it gets overlapped by the blue div. Any hints?


#2

add the

position: absolute;

For the parent.

And

position: absolute;
bottom: -2em; //Here try with diferents values
width: 100%;

For the blue div


#3


No. It’s still overlapping


#4

I put a negative value
See the

buttom

line…
Put something like -2em or -3em


#5

I tried that; still nothing :confused:


#6


¬-¬


#7

Hmm. I guess I couldn’t make myself clear. I wanted to keep the blue div inside the parent div(the red one) such that it occupies the bottom most position inside its parent container.


#8

Sorry… try this.

.outer{
  background-color:red;
  width:100%;
  position: absolute;
}
.variable-height-div{
  width: 100%;
  background-color:green;
  border-style: solid;
  border-width: 1px;
  border-color: yellow;
}

.fixed-height-div{
  height:35px;
  background-color:blue;
  border-style: solid;
  border-color: yellow;
  border-width: 1px;
  width: 100%;
}

you can check that the blue div is inside the red div adding

  padding-bottom: 20px;

to the red div and

  margin-top: 20px;

to the blue div