css - How do you vertically align an empty div inside a full height div? -

big picture: i'm trying make bar graph made of discrete units. each unit div. bar grow bottom top.

details: have container div holds of unit divs, or blocks. container has vertical-align of bottom this.

this should like: http://jsfiddle.net/hpf4h/1/

<div id="container">     <div class="block"></div>     <div class="block"></div>     <div class="block"></div> </div>  #container {     height: 100px;     width: 10px;     padding: 1px;     background-color: #00f;      display: table-cell;     vertical-align: bottom; }  .block {     height: 10px;     width: 10px;     margin: 1px 0px 1px 0px;     background-color: #0f0; } 

that works fine, need container have height of 100%. makes happen: http://jsfiddle.net/7n7zh/1/

i'd prefer find way css, preferably not hacky. i'm using jquery behavior in project, use last resort.

edit: also, parent tags have height of 100%, including html , body.

make #container's container element display:table : http://jsfiddle.net/7n7zh/2/

when use display:table-cell browser looks ancestor elements being display:table-row, display:table-row-group , display:table. if can't find them, creates pseudo elements stand in them. that's what's happening here.

so when display:table-cell; height:100%, that's 100% of created pseudo element display:table. pseudo element high content, , there's no way in css "make pseudo-element have height that's 100% height of it's parent instead".

but possible have real element display:table , set height 100%, in case browser use , not create display:table pseudo element.