如何擺脫頁面上的滾動條？

我知道這個答案很簡單，但我有一個非常簡單的HTML頁面，包含3個div（header，map_canvas和sidebar）。我有一些CSS把所有這些放在需要去的地方。但出於某種原因，我正在瀏覽器窗口中獲取滾動條，我不希望它們在那裏，我只是希望頁面很好地適合窗口的高度和寬度。任何幫助深表感謝。如何擺脫頁面上的滾動條？

我的頁面是由這個HTML的：

<!doctype html> 
<html> 
    <head> 
     <title>CSS Exercise</title> 
     <link rel="stylesheet" href="css/style.css" /> 
     <script src="js/script.js"></script> 
    </head> 
    <body onload="initialize()"> 
     <div class="header"></div> 
     <div id="map_canvas"></div> 
     <div class="sidebar"> 
      <input id="lat" type="text" /> 
      <input id="lng" type="text" /> 
     </div> 
    </body> 
</html>

而這個CSS：

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

JSFiddle link

來源

2012-05-10 Gady