title: How do I get rid of the scrollbars on the page?
body: <p>I know the answer to this is going to be simple, but I have a pretty simple HTML page, with 3 divs - header, map_canvas, and sidebar. I have some CSS to put all of this where it needs to go. But for some reason I am getting scrollbars in the browser window, and I don't want them there, I just want the page to fit the height and width of the window nicely. Any help is much appreciated.</p>
  
  <p>My page is made up of this HTML:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;CSS Exercise&lt;/title&gt;
          &lt;link rel="stylesheet" href="css/style.css" /&gt;
          &lt;script src="js/script.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload="initialize()"&gt;
          &lt;div class="header"&gt;&lt;/div&gt;
          &lt;div id="map_canvas"&gt;&lt;/div&gt;
          &lt;div class="sidebar"&gt;
              &lt;input id="lat" type="text" /&gt;
              &lt;input id="lng" type="text" /&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;​
  </code></pre>
  
  <p>And this CSS:</p>
  
  <pre><code>body {
      height: 100%;
      width: 100%;
  }
  
  html {
      height: 100%;
  }
  
  .header {
      width: 100%;
  }
  
  #logo {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 8px;
  }
  
  .sidebar {
      float: right;
      width: 20%;
      height: 100%;
      text-align: center;
  }
  
  #map_canvas {
     float: left;
     width: 80%;
     height: 100%;
  }​
  </code></pre>
  
  <p><a href="http://jsfiddle.net/VTR5H/" rel="nofollow">JSFiddle link</a></p>