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;
}

solution

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