Menu
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;
}
646
asked Sep 19 '25 15:09
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
139
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
