Body Height 100% Displaying Vertical Scrollbar

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.

Height 100% causes scroll bar to appear

the border: solid blue 5px; is causing the scroll bar to appear.

It ends up having 10px more height than the parent element "body" (5px bottom +5px
top).

if you really need a border, you subtract it from the 100%.

How to set 100 % height without having a vertical scrollbar?

Be aware that percentual heights refer to the height of the parent.
You can use calc() to solve your issue:

#__next{
height: calc(100% - navbarpx);
...
}

calc()

For the padding issue you can look into border-box.

Why vertical scroll bar appearing when height is 100%?

For two reasons

  1. The body has a default margin that you'd need to eliminate with body {margin:0}
  2. The the other issue is that your borders factor into the size of your elements and increase the height. You can fix this by adding div {box-sizing:border-box}

jsFiddle example

XHTML HTML element with 100% height causing scrollbars

I need 100% height in a XHTML document so that I can have div elements with 100%.

Anyway, I found the answer:

This problem only occurs when the top most element has a top margin.
It seems that that top margin gets added to the 100% height making it higher and causing the scrollbar.

So either use padding-top to space the top most element or use a with no top margin between the tag and the next element with a top margin.

Div element height 100% with vertical scrollbar

You need to give height:100% to parent div of #active-panel-container too.

$('#active-panel-container').on('scroll', function(e) {  console.log('scrolling');});
body,html {  margin: 0;  padding: 0;  height: 100%;  overflow: hidden;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div style="position:relative;height:100%;">  <div id="active-panel-container" style="height:100%;overflow-y:scroll;  margin: 0 auto;">    panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here panel divs go in here   </div></div>

min-height 100vh creates vertical scrollbar even though content is smaller than viewport

Adding flex-grow seems to do the trick:

body {
min-height: 100vh;
display: flex;
flex-direction: column;
}

.wrapper {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-around;
}

https://jsfiddle.net/uxgaaccr/2/

Not sure why, but height: 100% on .wrapper doesn't seem to suffice, it needs flex-grow instead. I think there was some extra white-space coming from justify-content: space-around that was adding to the height. Not confident in my reasoning, but it seems to work...



Related Topics



Leave a reply



Submit