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
- The body has a default margin that you'd need to eliminate with
body {margin:0}
- 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
Force Ie9 to Emulate Ie8. Possible
Can't Get The Complete Address While Uploading a File
:Before &&: After Pseudo Elements Not Showing Firefox
Is It Ok to Use <Strong> in Place of <B> Blindly
Applying CSS for Only Parent But Not to Children
How Organize Pagination with a Large Number of Pages in Django Project
How to Create a Curved Speech Bubble
CSS Align Images and Text on Same Line
How to Play Shoutcast Internet Radio Streams with HTML5
How to Make Text Vertically and Horizontally Center in an HTML Page
CSS Border on Png Image with Transparent Parts
Does Http-Equiv="Refresh" Keep Referrer Info and Metadata
Overflow-Y:Visible Not Working When Overflow-X:Hidden Is Present