Reputation: 94409
I'm trying to make a div
to have 100% width of its parent element (body
). body
has a horizontal scrollbar and the div
only takes up the viewport width. To fix this I added
width: inherit;
to it. I expected it to work since inherit
, according to the definition, means "taking the computed value of the property from its parent element". I tested it in a simpler model and it works: http://jsfiddle.net/DerekL/EYgT9/.
However, when I apply the code to my actual project it doesn't work as expect. It doesn't even seem to follow the definition.
As you can see, the div
has inherit
as its width
. But it's computed width is not the width of its parent body
, instead it's some other value 302px
.
Now let's take a look body
:
body
clearly has a width of 470px
.
I couldn't figure out what's the reason behind this, making it not working as expected. The overall structure is the same as the fiddle, but result aren't the same.
What are the possible reason of this happening? Sorry that I couldn't post the relevant part of the code since I don't even where it's causing this issue.
Upvotes: 2
Views: 1970
Reputation: 31
Your body tag has position static and for the position absolute to work properly the parent element must have position set on either relative or absolute. Just add position: relative or absolute; to the body tag.
Upvotes: 0
Reputation: 26034
This is because the element with position:absolute
is positioned in reference to <html>
since <body>
doesn't have a position to put it in reference to. Thus, it's inheriting its width from html
as well.
To fix it, add position:relative
to body
Upvotes: 3