Issue with Making Child Div Inherit Height from Parent <td> without js or absolute positning.
I'm facing a problem with making a child div (.auto-box) inherit the height of its parent <td> in HTML/CSS without having using javascript or position absolute.
Here's a simplified version of my code:
https://codepen.io/umanga/pen/JjVMNbJ
7 Replies
I'm not sure if it's correct way to do it but if you add
it should work
Does not work.
do you know why the it did not just work with .content {height: 100%} ?
no idea I also thought it should work but it didn't so i went up the DOM tree until it worked 🙂
Thanks bro. that saved my time. @Kevin probably can help us what's happening here?
height: 100% doesn't work if the parent doesn't have a declared height, because height: auto means the height is defined by content inside that element. So, you're .content div is only as big as the .auto-box inside of it.
Now, tables are a little different in that the space of a cell can be influenced by other elements (like your red one), but doesn't change that 100% for height won't work. The only time we can use that is if we use display: grid, because grid items live inside of their cell, and so height as percentages work, because it'll be a percent of the cell that it's inside of.