Member Avatar for daviddoria

On this page:

I have two elements, "bluegradient" and "whitebox".

The bluegradient height is 80% (of the page, right?).

The whitebox height is 80% (I think this "80% of the height of the bluegradient" since it is nested, right?). The whitebox has top and bottom margins of 10% (this is 10% of the whitebox height, right?). Therefore the total whitebox should be 80 + 8 + 8 = 96% of the bluegradient height. However, a vertical scrollbar appears on the bluegradient (due to overflow: auto;) - but shouldn't the whitebox be small enough not to warrant this scrollbar?

Thanks,

David

  • 3 Contributors
  • 9 Replies
  • 869 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by daviddoria

Dani AI

Generated

Quick diagnosis and fixes for the symptoms in this thread (): there are two separate but related behaviors at play — how percentages are resolved, and vertical margin collapsing.

Percent heights only resolve when the containing block has an explicit height; otherwise height: 80% computes to auto. Also, vertical margin percentages are calculated from the containing block's inline size (width), not the child height — so margin-top: 10% is 10% of the container width, not 10% of the whitebox height. (devdoc.net)

The whitebox appearing to “collapse” into the top of the blue area is classic parent/first-child margin collapse. Creating a new block formatting context (BFC) on the parent stops that collapse — overflow can do this (which explains why overflow:auto fixed the collapse but then produced scrollbars once the parent had an explicit height), and so can other BFC triggers. display:inline-block (as found) works but changes layout behavior (shrinkwrapping, whitespace). (developer.mozilla.org)

Preferred, less destructive fixes:

/* create a clean BFC without side-effects */
.bluegradient { display: flow-root; }

/* small, non-visual separator hack */
.bluegradient { border-top: 1px solid transparent; }

/* avoid needing parent height if the intent is "percent of viewport" */
.bluegradient { height: 80vh; }

flow-root creates a BFC without overflow side-effects; a tiny transparent border or a bit of padding also prevents margin collapse. Use vh (viewport units) if the section should be a portion of the viewport instead of depending on body/html heights. (developer.mozilla.org)

Troubleshooting tips: inspect the Computed panel in DevTools to see final pixel values for height and margins; temporarily remove the height:100% on body/html and try 80vh to see whether the scrollbar disappears; if using overflow to create a BFC, comment why it is there to avoid future confusion.

Recommended Answers

All 9 Replies

Member Avatar for teedoff

You also have 80% height on your body tag, thats whats causing the scroll bar. Remove that and the bar will disappear.

Member Avatar for daviddoria

Hm, I see

body
{
height: 100%;
/*overflow: scroll;*/
}

I had to do that because apparently the 80% on the bluegradient doesn't work unless the parent (body) also has a height.

Member Avatar for teedoff

Is there a reason you want a scroll bar? Most people that have pages of varying heights and therefore dont like when one page is short and the next page is longer, thereby adding a scroll bar on their browser. If thats what you're wanting. the you would add..... overflow: scroll to the html tag.

Member Avatar for daviddoria

I was told to add the overflow: auto to the bluegradient in order to fix the collapsing margins. You can see now that the whitebox is at the very top of the bluegradient even though there is a top margin on the whitebox. If you have a better way to fix that, I'm all ears.

Thanks for your help on all of these issues,

David

Member Avatar for teedoff

Here is a good explanation of the overflow property.

If the whitebox content were to be larger than the bluebox, then the overflow: auto would add a scrollbar to keep from content overflowing into the parent container. Provided of course you set a specified height to the whitebox.

The overflow property can also be used to clear floats and yes prevent collapsing margins. Read the linked page I gave you and the last use of the overflow is talked about.

I still see two navbars on your site though. Have you uploaded the page since you made changes?

Edited by teedoff because: n/a
Member Avatar for daviddoria

Very strange - it was hidden (commented) in chrome but I indeed saw 2 in firefox! I removed the div one so now you will see the one I attempted to center via the UL tag that is still not centered:

Also, those were good things to know about the overflow property, but I still don't get what I'm doing wrong. With the overflow auto, the scrollbar appears when I don't think it should. Without the overflow auto, the margin of the whitebox is not applied (i.e you can't see any blue at the top). Is there a better way to stop the collapsing margins besides the overflow property?

Member Avatar for ko ko

How about the 'display: inline-block' ?

.bluegradient {
          display: inline-block;
}

I noticed this bugs for months. It commonly see when the first child element has set the vertical-margin.

Member Avatar for daviddoria

Great - the stopped the collapsing margins. There is another overflow problem though - the gray background is larger than the screen - i.e. scroll bars (the real browser scroll bars) appear even though the content is not long enough to warrant them.

Thoughts?

Member Avatar for daviddoria

I'll start a new thread for this - thanks for answering the original question :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.