我正在尝试让标题 div 显示在 Google map 上方，但 map 会填充所有其余页面内容。
我遇到的问题是页面一直在滚动，而我不希望它滚动。它滚动的量与标题高度相同。我尝试放置 overflow: hidden 但这不起作用，因为虽然它不再滚动，但它也没有显示所需的 google Logo 和合法内容。
这是我的 html:
<body>
<header>Title</header>
<div id="appcontent">
<div id="map-canvas"></div>
</div>
</body>
和 CSS:
html, body {
margin: 0px;
width: 100%;
height: 100%;
}
#appcontent {
width: 100%;
height: 100%;
}
#map-canvas {
width: 100%;
height: 100%;
}
header {
width: 100%;
height: 40px;
background-color: #CFCFCF;
}
我已经对我在这里尝试做的事情做了一个 fiddle : http://jsfiddle.net/5LVQX/1/
谁能帮我解决这个问题？
最佳答案
通过使用绝对定位，像这样 ( fiddle )
#map-canvas {
position: absolute;
top: 40px;
left: 0px;
right: 0px;
bottom: 0px;
}
header {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 40px;
background-color: #CFCFCF;
}
参见 position: absolute .
关于html - 谷歌地图填充页面保留在标题下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21022512/