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:


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


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;


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 {

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

height: calc(100% - 2px);

jsFiddle example