4 ms·
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: abs
by bchen 10y ago
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 10y agoMy 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 10y agoIsn'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?