How do I get rid of the scrollbars on the page?
css, html
Solution
This will hide any overflow and prevent scrollbars from being displayed.
body {
overflow: hidden;
}
Problem
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. My page is made up of this 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> ``` And this 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