How to make a div inside a table cell "height: 100%"
I have a layout using table cells. I know the use of tables is pretty old-fashioned, but for this I needed to make one row equal to the height without using absolute values for their height
See this script or this project .
I need a div .wrapper
to render correctly .infobox
in firefox. Before that I set .infobox
to 100% the height (with an absolute position) which worked fine on chrome as the parent- td
element had position:relative
.
I want the hover effect to apply to the entire table cell, but I desperately want to figure out how to do it. I only want to use relative values (like em or%) for the height and width to make the layout kind of responsive / fluid.
Edit: Ok, using @OneTrickPony's idea, I tried wrapping them in another "table-row" -div. So how can I now make both "table-cell" -divs the same height, with the type vertical-align: middle
but without specifying the absolute height for the "table-row" -div?
source to share
There is one more option, but it depends on whether it is suitable for your project, which browsers you want to support.
http://caniuse.com/#search=flexbox
I simplified your markup a bit and removed the table entirely.
<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 broke 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;
}
A figure / figcaption is probably a better choice than an article.
source to share
So what I realized is that there is really no way to set the height of two (or more) divs to equal values without specifying absolute values . As a workaround, I wrote this little script that does the 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');
});
});
});
source to share