HTML/CSS: Remove vertical scroll with height: 100%;
I’m creating two columns that I want to fill the page. Very simple. However, I’m getting a very slight vertical scrollbar. Setting
margin: 0 and
padding: 0 on the
body didn’t fix it.
I’ve looked into
overflow: hidden but I don’t like it. I also looked into placing a
clear:both div at the bottom, but that didn’t do anything. I’ve looked into using
min-height, but I can’t seem to get it to work properly.
I have two questions:
- Why is that vertical scrollbar appearing?
- How can I remove the vertical scrollbar?
Live Example: http://jsfiddle.net/XrYYA/
It’s because of the 1px borders on each side of the element.
100% + 2px border(s) != 100%.
You could use
box-sizing to include the borders in the height of the element.
Alternatively, you could use
calc() to subtract the 2px.
height: calc(100% - 2px);