How to make a div inside a table cell “height: 100%”

Question

I have a layout using table cells. I know, using tables is quite out-dated, but I needed it for this one to make each row the same height without using absolute values for their height

See this fiddle or this draft.

I needed the .wrapper div, to display the .infobox correctly in firefox. Before that, I had the .infobox set as 100% height (with position absolute) which worked fine on chrome, since the parenting td-element had position:relative.

I want the hover-effect to be applied to the whole table cell but I'm desperate to figure out, how. I only want to use relative values (like em or %) for height and width, to make the layout sort of responsive/fluid.

Edit: Ok, using @OneTrickPony's idea, I tried wrapping them around in another "table-row"-div. So how can I now make both "table-cell"-divs the same height, with kind of vertical-align: middlebut without specifying an absolute height for "table-row"-div?

Answer 1

There is another option, but whether or not it is a good fit for your project depends on which browsers you want to support.

http://caniuse.com/#search=flexbox

I've simplified your markup a bit and completely removed the table.

<div id="pictures">
    <article class="entry picture">
        <div class="entry picture">
            <img class="picture" src="./images/150x150.jpg" width="150" height="150"></img>
        </div>
        <div class="entry picture infobox">
            <a href="#" class="entry">
                <h3 class="entry picture headline">contents_0 alpha headline</h3>
                <div class="view picture">
                    <span class="comments_amount">5</span>
                    <span class="articlenk info">Bild zeigen</span>
                </div>
            </a>
        </div>
    </article>

    <article class="entry picture"><div class="picture wrapper">
        <div class="entry picture">
            <img class="picture" src="./images/150x71.jpg" width="150" height="71"></img>
        </div>
        <div class="entry picture infobox">
            <a href="#" class="entry">
                <h3 class="entry picture headline">contents_0 beta headline</h3>
                <div class="view picture">
                    <span class="comments_amount">5</span>
                    <span class="pictures info">Bild zeigen</span>
                </div>
            </a>
        </div></div>
    </article>
</table>

The CSS for this is very simple, but I've left off the prefixes:

div#pictures {
    display: flex;
    flex-flow: row wrap;
}

article {
    flex: 1 1 50%;
    box-sizing: border-box; /* optional */
    position: relative;
}

div.infobox {
    position: absolute;
    bottom: 0;
}

http://jsfiddle.net/NDMTH/1/

Figure/figcaption would probably be a more appropriate choice here than article.

Answer 2

Ok, so I figured that there actually is no way to set the height of two (or more) divs to equal values without defining absolute values. As a workaround, I wrote this little script, which does that job:

$(window).load(function() { /* Important because the script has to "wait" until the content (images) has been loaded */
  $('.picture-row').each(function() {
    var rowHeight = 0;
    $(this).children('.picture.item').each(function() {
      if ($(this).outerHeight() > rowHeight) {
        rowHeight = $(this).outerHeight();
      }
    });
    $(this).children('.picture.item').each(function() {
      $(this).height(rowHeight + 'px');
    });
  });
});