CODEWITHSUNDEEP
inheritancehtmlheightnested
Jan Tacci
Jan Tacci

Reputation: 3201

Why Isn't My Nested Div Inheriting The Parent Height?

I have a REALLY BASIC question regarding nested divs and height inheritance. Let's say I have the following html snippit:

...
<div style="height: 50px;">
    <div style="height: inherit;">
    </div>
</div>
...

I would think just by inspection that the inner div would have the same height (50px) as the outer one but when I tested it the height was not inherited.

First off, are parent/child relationships betwen divs defined by nesting one within the other? Next, what do I need to do to make the inner div inherit the outer one?

Sorry guys for such a basic question. I am running on fumes here been working (on something else for hours and I have to switch gears to this). Please don't bash me for asking such a dumb question. :)

Thanks!

Upvotes: 4

Views: 14355

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157294

If you are not able to inherit height of parent div use height: 100%; for inner div

Demo

And btw your div does inherit height, it's just that if you want to see give it a background-color or a border and you'll see the inner div has inherited the height of it's parent div

Demo 2

Upvotes: 5

Related Questions