How to make a div inside a table cell "height: 100%" - html

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');
});
});
});