Google地图填充页仍在标题下方 [英] Google map fill page remaining beneath header
问题描述
我试图在Google地图上方显示标题div，但是地图会填充所有其他网页内容。
麻烦我是的，该页面保持滚动，我不想要它。它滚动与标题高度相同的量。我尝试放溢出：隐藏，但是不工作，因为虽然它不再滚动它也不显示所需的谷歌标志和法律的东西。
是我的html：
< body&
< header>标题< / 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;
}
我在这里做了一个小提琴：
http://jsfiddle.net/5LVQX/1/
使用绝对定位，像这样小提琴）
＃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 。
I'm trying to make a header div appear above a Google map, but have the map fill all of the rest of the page content.
The trouble I have is that the page keeps scrolling and I don't want it to. It scrolls the same amount as the header height. I tried putting overflow: hidden but that doesn't work because although it no longer scrolls it also doesn't show the google logo and legal stuff that is required.
This is my html:
<body>
<header>Title</header>
<div id="appcontent">
<div id="map-canvas"></div>
</div>
</body>
and 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;
}
I've made a Fiddle of what I'm trying to do here: http://jsfiddle.net/5LVQX/1/
Can anybody help me out with this?
By using absolute positioning, like so (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;
}
See position: absolute.
这篇关于Google地图填充页仍在标题下方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
