HTML/CSS: Remove vertical scroll with height: 100%;

Question

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:

Why is that vertical scrollbar appearing?
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;
}

Answer 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

HTML/CSS: Remove vertical scroll with height: 100%;

Question

1 answers

solution1
6 ACCPTED 2013-11-09 20:58:58

HTML/CSS: Remove vertical scroll with height: 100%;

Question

1 answers

solution1 6 ACCPTED 2013-11-09 20:58:58

solution1
6 ACCPTED 2013-11-09 20:58:58