Body height 100% displaying vertical scrollbar

100vh scrollbar
div height: 100 percent scrollbar
html page height
iframe full height no scroll
css 100vh too tall
css overflow
html scroll
firefox height 100 scrollbar

Out of curiosity, considering the example below, why does having the margin on the #container div cause a vertical scrollbar to appear in the browser? The container is much smaller in height than the body height which is set to 100%.

I have set the padding and margins to 0 for all elements except the #container. Note that I have deliberately omitted absolute positioning on the #container div. In this case how is the browser calculating the height of the body and how is the margin affecting it?

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0; margin:0;}
html, body { height:100%; }
#container
{
  padding:10px;
  margin:50px;
  border:1px solid black;
  width: 200px;
  height: 100px;
}
</style>
</head>
<body>
  <div id='container'>
  </div>
</body>
</html>

Example also on JSFiddle

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 { height: 100%; } body { margin: 0; min-height: 100%; overflow: hidden; }. Also, your div.back selector has an invalid value on the display  html,body{height:100%;padding:0;margin:0;border:0;} Which causes a vertical scrollbar to appear on IE8, Chrome 5 and Mozilla 3.6, all latest version. Also, the document is empty, it only has the html, head and body tags so nothing is going out of screen to cause that.

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).

The extra height is coming from the default margins on the body and h1 elements. The html/body elements have margin/padding depending on browser so you need to zero both. The h1 on the page has a default top margin which collapses onto body and makes body 100% + 1em (or whatever the default is) so you get a scrollbar. Body height 100% displaying vertical scrollbar (8) Out of curiosity, considering the example below, why does having the margin on the #container div cause a vertical scrollbar to appear in the browser? The container is much smaller in height than the body height which is set to 100%.

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)

I've taken my page down to the simplest possible form, and I'm still getting a problem where the vertical scroll bars appear. It seems that 100%  Assuming that #header, #navbar and #content are children of container, the reason is quite obvious. #content is also set to 100% height and additionally has a top value. So, it's full height and then shifted down, of course resulting in a vertical scrollbar.

adding float:left; is nice, but will interfere with central horizontal positioning using margin:auto;

if you know how big your margin is, you can account for that in your height percentage using calc:

height: calc(100% - 50px);

browser support is good, but only IE11+ https://caniuse.com/#feat=calc

Safari) with Body tags that are using 100vh (100 vertical-height units) Margin collapsing causing unexpected scrollbars with 100vh body in display: table ; /* NOTE: Display "block" does not seem to work with height: 0px. Seems to work great in Firefox. Why, then, does IE display a vertical scrollbar with a little whitespace at the bottom? Edit: Since this issue is fixed, the short explanation: A 100% height/width Silverlight control within an ASP.NET <form> tag spills over just a bit in IE because of the form tag.

Add overflow: hidden; to html and body.

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

body {. height : 100% ;. margin : 0 ;. padding : 0 ;. background-color Your body element will often contain more content than can be displayed in one you will want a scrollbar to appear and not have your body element's  I'm applying min-height: 100vh; to a flexbox container and I get a vertical scrollbar when I use justify-content: space-around;. I don't want to force the height, but I don't understand why the scrollbar is there since the contents have smaller dimensions than the viewport.

HTML Involved. Creating such a page involves 5 container elements : Main outer container - this will expand to 100% of screen height; Container  Sounds like you're trying to do something fancy otherwise you wouldn't need height 100% on <body>. For height and width to work consistently well, you should start off with set values in pixels or em, and then start using percentages. So for example body:style:width:1000px, height:800px.

div > < style > #example { width : 300 px ; height : 200 px ; border : 25 px solid For not shown elements ( display:none or not in the document). below we can see scrollHeight and scrollTop for a block with a vertical scroll. As an alternative to setting both the html and body element's heights to 100%, you could also use viewport-percentage lengths. 5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units. The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial

The options include clipping, showing scrollbars, or displaying the a set height ( height or max-height ) or white-space set to nowrap . scrollTop property may be used to scroll an HTML element even when overflow is set to hidden . -moz-​scrollbars-vertical [1]: Use overflow-x : hidden and overflow-y  Over the weekend, I ran into an interesting behavior in Webkit (Chrome and Safari) in which a Body tag with 100vh (100 vertical-height units) was causing a vertical scrollbar to appear despite the fact that the dimensions of the Body tag seemed to be constrained to the viewport.

Comments
  • See also stackoverflow.com/questions/34357434/…
  • Does this mean the heights of elements on a page are calculated starting with the window, then the body, then elements inside/or above the body? Are all percentages converted into px or pt or em values?
  • @TMB: A 100% height on html makes it 100% of the viewport (a browser's viewing area), and a 100% height on body makes it 100% of its parent, which is html. Any percentages that follow are always that of an element's ancestor(s). If you don't set 100% height on html or body then they behave like any other block element. See w3.org/TR/CSS21/syndata.html#percentage-units for details. %s and ems will eventually all have to be converted to some absolute value during rendering, in order for a browser to know exactly how large or small to measure and render things on screen.
  • @neodymium: That's right. Both html and body behave like any other block-level element as well.
  • So how should be fixed? By floating the container as Michel suggests?
  • @Daniel Albuschat: I'm honored!
  • Why 50px? Magic number.
  • "if you know how big your margin is." I believe is what OP is referring to with the 50px
  • this solution removes scrollbar completely. even on the pages where scroll is needed
  • Typo in first line, overflow:hidded
  • if you have a footer it removes it
  • This fixed my issue where I was having 2 vertical scroll bars. Setting html to have overflow: hidden and leaving body alone fixed that. Both my body and html have height: 100%.
  • There are many reasons why this is a terrible idea, including arbitrary height differences per user window, and that internal rounding methods differ by browser.