Vertical align a child div to the bottom of a parent div, and set the child as a percentage of the parent's height

css, html

Solution

Use positioning (relative on the parent, absolute on the child) instead of the display property:

#outerdiv {
    height: 100%;
    width: 100%;
    position:relative;
}
#innerdiv {
    width: 100%;
    height: 20%;
    background-color: red;
    position:absolute;
    bottom:0;
}

jsFiddle example

Problem

I'm trying to vertical align a child div to the bottom of its parent div, and set it as a percentage of the parent's height. However, the height: 20% property of the child seems to be getting ignored, and the div stretches to take up the entire 100%. The end goal is to have a full-screen title page photo as an intro to an article, with a semi-opaque bar running along the bottom of the photo that will have the title of the article in it. I'm using percentages to make it a responsive design for any size screen. JS Fiddle: http://jsfiddle.net/A52fw/1/ HTML: ``` <body> <div id="outerdiv"> <div id="innerdiv"> test </div> </div> </body> ``` CSS: ``` html, body { height: 100%; width: 100%; } #outerdiv { height: 100%; width: 100%; display: table; } #innerdiv { width: 100%; height: 20%; background-color: red; display: table-cell; vertical-align: bottom; } ```

Original source