Jump to content

Box model: lost parent element scrollbar


Rain Lover
 Share

Recommended Posts

The first sample shows scrollbars correctly:

<!DOCTYPE html><html><head><title></title><style type="text/css">#parent {width:102px; height:101px; background:red; overflow:auto;}#child {width:100px; height:100px; margin:1px; background:green;}</style></head><body><div id="parent"><div id="child"></div></div></body></html>

But the second doesn't:

<!DOCTYPE html><html><head><title></title><style type="text/css">#parent {width:101px; height:102px; background:red; overflow:auto;}#child {width:100px; height:100px; margin:1px; background:green;}</style></head><body><div id="parent"><div id="child"></div></div></body></html>

Why is that?Thanks!

Link to comment
Share on other sites

Because the parent is smaller than the child in the first example than in the second.Example one:Parent = 101px highChild = 102px high (100px + margin top 1px + margin bottom 1px)Example two:Parent = 102px highChild = 102px high (100px + margin top 1px + margin bottom 1px)That's why. If you want scroll bar just set overflow to scroll.

Edited by DarkxPunk
Link to comment
Share on other sites

Because the parent is smaller than the child in the first example than in the second. Example one:Parent = 101px highChild = 102px high (100px + margin top 1px + margin bottom 1px) Example two:Parent = 102px highChild = 102px high (100px + margin top 1px + margin bottom 1px) That's why. If you want scroll bar just set overflow to scroll.
In the second example the parent width is smaller than the child total width and the scrollbars should appear.
Link to comment
Share on other sites

Only when the edge of child extending beyond edge of parent will scroll bars appear, the right margin of child extends beyond right edge of parent, the right edge of child is tight up against right edge of parent, because of child left margin.
Thanks for the answer, but I still don't understand the difference between the first and second example although I read your explanation a few times.
Link to comment
Share on other sites

Right the parent element will ignore the right margin of child element. The 1px left margin will force the child element to the right, 1px + 100 width (101px) of child element still places it within the confines of parent element which is 101px width, therefore it is not greater than the parent element width, so no scroll bars.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...