我知道答案很简单,但我有一个非常简单的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%;
}?