4 ms·
I see that you can use "height: 100%" on the inner item to fill the height of the parent that has "display: flow-root". I've had difficulties implementing simi
by ino 10y ago
I see that you can use "height: 100%" on the inner item to fill the height of the parent that has "display: flow-root".
I've had difficulties implementing similar things in the past.
- bchen 10y agoTo 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?