Display table cell height 100% align image bottom

Question

I'm using a table layout and attempting to set the height of the child of table-cell to be 100% of it's container. Why does this not happen and how do you resolve this?

I also tried setting the table-cell height to 100% without success.

I would like to align ONLY the images to the bottom of the container. How can I do that within a table display?

The amount of text in each table cell is dynamic

Fiddle: http://jsfiddle.net/3u3gpf2n/1/

Answer 1

It seems like you're trying to create a 3-column, 2-row table, but only using single rows in order to keep your markup semantic. Without flexbox, distributing the image to the bottom will require some CSS trickery.

One example, which should fit your requirements of (1) cross-browser, including IE, compatibility (2) allow for arbitrary text in the box is:

*{
    padding: 0;
    margin: 0;
}

#container{
    width: 500px;
    margin: 0 auto;
}

ul{
    list-style-type:none;
    display: inline-table;
}

li{
    position: relative;
    /* image width / (image height * column count) */
    padding-bottom: 11.764705882%;
    display: table-cell;
    background: red;
    /* 100 / column count */
    width: 33.333%;
}

a{
    color: white;
}

img{
    width: 100%;
    position: absolute;
    bottom: 0;
}

<div id="container">
<ul>
    <li><a href><div class="header">Xiao Huang</div>
        <img src="http://3door.com/sites/default/files/styles/ablum_306_108/public/special/xiao_huang_ren_fu_ben_.jpg?itok=cPnwgTyV" /></a></li>
    <li><a href><div class="header">Xiao Huang</div>
        <img src="http://3door.com/sites/default/files/styles/ablum_306_108/public/special/xiao_huang_ren_fu_ben_.jpg?itok=cPnwgTyV" /></a></li>
    <li><a href><div class="header">Xiao Huang Xiao Huang Xiao Haung</div>
        <img src="http://3door.com/sites/default/files/styles/ablum_306_108/public/special/xiao_huang_ren_fu_ben_.jpg?itok=cPnwgTyV" /></a></li>
    </ul>
</div>

I've added a relative position to the LI, and absolutely positioned the Image. To ensure things work correctly, I've given the cells a percentage-based width. I've also added padding to the bottom.

The one thing that this doesn't include is the cursor all the way down. If the user clicks between the image and text, the anchor will not be triggered.

To fix this, consider removing the UL/LI, and styling the anchor tags as table-cells and the wrapping DIV (or NAV, if you have a JS shim for HTML5 tags) as table.

Answer 2

I'm using a table layout and attempting to set the height of the child of table-cell to be 100% of it's container. Why does this not happen and how do you resolve this?

I also tried setting the table-cell height to 100% without success.

When using percentage heights in CSS you need to specify the height for all parent elements, up to and including body and the root element (html).

From the spec:

CSS height property

percentage
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly and this element is not absolutely positioned, the value computes to 'auto'.

auto
The height depends on the values of other properties.

In other words, if you have not set an explicit height to the containing block (and the child is not absolutely positioned), then your child element with percentage height will have no frame of reference.

So the problem in your code boils down to this: You're missing a height on parents ul, #container, body and html.

DEMO: http://jsfiddle.net/sedetcc6/

I would like to align ONLY the images to the bottom of the container. How can I do that within a table display?

Although vertical-align is well-suited for aligning elements in a table cell, in this particular case, because each image has a sibling that must not move, the vertical-align property is not useful.

But the images can be shifted with absolute positioning. Try this:

li{
    display: table-cell;
    background: red;
    height: 100%;
    position: relative; /* establish nearest positioned ancestor for abs. positioning */
    width: 33.33%; /* new */    
}

img{
    width: 100%;
    position: absolute; /* new */
    bottom: 0; /* new */
}

DEMO: http://jsfiddle.net/sedetcc6/1/

NOTES:

• No changes to original mark-up
• For the record, this problem could be easily solved with flexbox, but I understand it's not an option here due to a need for IE 8 & 9 browser support.