CSS: div with display:table; within a list element no auto height?

Question

I have an unordered list ul li where each li is floated but has a height value due to setting overflow:hidden; to the list-item.

So when hovering the element in the webinspector the list-item clearly has a height value of 288px.

Within each li i also have a div.caption with the following attributes:

.caption {
  opacity: 0;
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  width: 101%;
  text-align: center;
  background-color: rgba(0,0,0,.6);
  display: table;
}

<li>
  <a href="#"><img src="#"></a>
  <div class="caption">some more elements in here</div>
</li>

The height of the list-item as mentioned above is automatic due to the height of the image within the li. (the webinspector clearly shows that the list-item has a height)

However my .caption div within the li is not automatically as high as the parent. I want the div.caption to be 100% as high as the list item.

What can I do here?

Example: http://jsfiddle.net/rgwcL8qt/1/ The overlay should always cover the entire image.

Answer 1

div.caption { display: table } with div.caption-in { display: table-cell } within creates a new block formatting context.

Changing to div.caption { display: block; } should solve your problem.

EDIT: Should you need to center the content inside the caption div then you ought to take a different approach:

.caption:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.3em;
}
.caption {
    opacity: 0;
    z-index: 1;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 101%;
    text-align: center;
    background-color: rgba(0,0,0,.6);
    display: block;
    cursor: pointer;       
}
.caption-in {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

http://jsfiddle.net/vmg8jfed/