[bchen]

To make a child element the same height as the parent, you can set the parent container to position: relative, and in the child element, set it to position: absolute; top: 0; bottom: 0. The downside of this trick is that the child element is now absolutely positioned and no longer behaves the same. Alternatively, you can use flexbox to do this, if using it is an option.

[pix64]

My favorite use of this is making a resizable box that always maintains the same aspect ratio. Padding % is out of the element's width. So width: 100%, padding-top: 50% will make a block that is 2:1 that resizes automatically.

[wwweston]

Isn't the other downside that you have to know beforehand which column in the layout is going to be of a larger (and possibly unknown) size?