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
No description
M
Mannix18d ago
I'm not sure if it's correct way to do it but if you add
table,tr,td,.content {
height: 100%;
}
table,tr,td,.content {
height: 100%;
}
it should work
U
uD18d ago
Does not work.
U
uD18d ago
do you know why the it did not just work with .content {height: 100%} ?
M
Mannix18d ago
no idea I also thought it should work but it didn't so i went up the DOM tree until it worked 🙂
U
uD18d ago
Thanks bro. that saved my time. @Kevin probably can help us what's happening here?
KP
Kevin Powell16d ago
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.
Want results from more Discord servers?
Add your server
More Posts
Color pngMy restraints are kind of weird, but I have game file icons that I want to port to the browser. Its How do i design something like thisI am trying to design this just using div and inside this div ( span ) how can i get the same resultquotes within html attributehow does the browser know which quote ends the attribute value?Card positioning inside a grid container, we want the price and buttons to be the same for each cardhttps://github.com/callum-laing/shopping-site/tree/main/app As you can see in the image, the buttonTrying to align every card so that the button?in before someone mentions the unfinished title. https://github.com/callum-laing/shopping-site/treeTailwind helpI use Tailwind and would like to display the 2 Li elements next to each other with a small distance What's a modern simple logical layout I can use for the main logo?I'm working on a website for my dads business and I just want to keep it really clean and modern. ThHelp with side navigation/sidebarI’m new to JavaScript and I’ve been working on personal projects trying to improve my skills. Couldbackground scrolling when menu is openHello, does anybody know, how to stop background scrolling when you open side menu? I've tried overfescaping the wrapperHey, is there a way to escape a wrapper on one side without using grid? I'm aware Kevin has made a vSome serious problems with my CSSSo, I have started building a site and I have got as far as the navigation, when I made it a few dayScroll Shadow in CSSWhen I scroll the white shadow is coming from below. How to make this with CSS. https://www.harpersOverflow-y: auto makes x-axis scrollbar appearHi folks, I have a react Sidebar component with scss styles. The sidebar has the main list 'sidebar_minFn confusionCodePen: https://codepen.io/Ceecee-Hart/pen/dyLZrKb I'm not sure where this extra space is coming fTriggering an animation based on scroll positionHi I want to recreate the marquee effect on scroll. https://afundi.im/ Any tips?Need help with a background img?How would I get the background pattern in the card to be behind avatar. I tried using position absol