将div定位在“绝对”的底部<div>

Question

I'm having troubles positioning my divs. I want to have my child div stick to the bottom of the parent div, with grandchild_1 and grandchild_2 staying correctly put. By that, I mean having grandchild_1 before grandchild_2 , like on the picture.

This is what I've tried, but the "child" div sticks to the top :

#parent {
   position: relative;
}

#child {
   position: absolute; bottom: 0;
}



<div id="parent">
    <div id="child">
        <div id="grandchild_1">
        </div>
        <div id="grandchild_2">
        </div>
    </div>
</div>

Anyone knows how I should proceed ? Thanks !

Answer 1

If you specify a height on the parent it will stick to the bottom.

Example: http://codepen.io/anon/pen/wGqzVd

HTML

<div id="parent">
  Parent
  <div id="child">
    Child
    <div id="grandchild_1">
      Grandchild 1
    </div>
    <div id="grandchild_2">
      Grandchild 2
    </div>
  </div>
</div>

CSS

div {
  padding: 5px;
}

#parent {
  position: relative;
  background: lightgray;
  height: 200px;
  width: 150px;
}

#child {
  position: absolute;
  bottom: 5px;
  background: yellow;
}

#grandchild_1 {
  background: pink;
}

#grandchild_2 {
  background: lightblue;
}

Answer 2

The provided code works as is...assuming that the parent has a height greater than that of the child.

 #parent { position: relative; height: 200px; background: pink; } #child { position: absolute; width: 100%; bottom: 0; background: green; } #grandchild_1, #grandchild_2 { height: 25px; background: red; margin: 10px; } 

 <div id="parent"> <div id="child"> <div id="grandchild_1">GC1 </div> <div id="grandchild_2">GC2 </div> </div> </div> 

As an alternative to positioning, flexbox can do the same... and the child will affect the height of the parent which an absolutely positioned child cannot .

 #parent { position: relative; height: 200px; background: pink; display: flex; flex-direction: column; justify-content: flex-end; } #child { width: 100%; background: green; } #grandchild_1, #grandchild_2 { height: 25px; background: red; margin: 10px; } 

 <div id="parent"> <div id="child"> <div id="grandchild_1">GC1 </div> <div id="grandchild_2">GC2 </div> </div> </div>