title: HTML/CSS: Remove vertical scroll with height: 100%;
body: <p>I'm creating two columns that I want to fill the page.  Very simple.  However, I'm getting a very slight vertical scrollbar. Setting <code>margin: 0</code> and <code>padding: 0</code> on the <code>html</code> and <code>body</code> didn't fix it.</p>
  
  <p>I've looked into <code>overflow: hidden</code> but I don't like it.  I also looked into placing a <code>clear:both</code> div at the bottom, but that didn't do anything.  I've looked into using <code>min-height</code>, but I can't seem to get it to work properly.</p>
  
  <p>I have two questions:</p>
  
  <ol>
  <li>Why is that vertical scrollbar appearing?</li>
  <li>How can I remove the vertical scrollbar?</li>
  </ol>
  
  <p><strong>Live Example:</strong>  <a href="http://jsfiddle.net/XrYYA/" rel="nofollow">http://jsfiddle.net/XrYYA/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="palette"&gt;Palette&lt;/div&gt;
      &lt;div id="canvas"&gt;Content&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>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;
  }
  </code></pre>