Body height 100% displaying vertical scrollbar
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.
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)
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).