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%;
}
This will hide any overflow and prevent scrollbars from being displayed.