'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 html and 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:

  1. Why is that vertical scrollbar appearing?
  2. How can I remove the vertical scrollbar?

Live Example: http://jsfiddle.net/XrYYA/

HTML:

<body>
    <div id="palette">Palette</div>
    <div id="canvas">Content</div>
</body>

CSS:

html, body {
height: 100%;
margin: 0;
padding: 0;
}

#palette {
float: left;
width: 300px;
height: 100%;
border: 1px solid black;
}

#canvas {
margin-left: 300px;
height: 100%;
border: 1px solid blue;
}
htmlcssheight


Solution 1:[1]

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.

jsFiddle example

div {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

Alternatively, you could use calc() to subtract the 2px.

height: calc(100% - 2px);

jsFiddle example

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions