Body height 100% displaying vertical scrollbar

A bit late, but maybe it helps someone.

Adding float: left; to #container removes the scrollbar, as W3C says:

•Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).


If you paint the backgrounds of html and body (giving each its own color), you'll quickly notice that body is being shifted down along with #container, and #container itself isn't offset from the top of body at all. This is a side effect of margin collapse, which I cover in detail here (although that answer describes a slightly different setup).

It's this behavior that's causing the scrollbar to appear, since you've declared body to have 100% the height of html. Note that the actual height of body is unaffected, as margins are never included in height calculations.


html,body {
   height: 100%;
   margin: 0;
   overflow: hidden;
}

This worked for me


Based upon @BoltClock♦'s answer, I fixed it by zeroing the margin...
so

html,body, #st-full-pg {
   height: 100%;
   margin: 0;
}

works where id "st-full-pg" is assigned to a panel div (which further contained panel-heading and panel-body)

Tags:

Html

Css