Gok*_*oku 6 html css google-maps
我试图在页眉和页脚之间插入一个googlemap地图作为主要内容,但地图得到100%并推倒页脚,我想要在它们之间拟合地图,这样如果我调整窗口大小,所有内容都会自动调整没有出现左栏滚动内容,但我遗漏了一些东西,请有人帮我一把吗？
<html>
<head>
<style type="text/css">
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
height: auto !important;
min-height: 100%;
height: 100%;
position: relative; /* Required to absolutely position the footer */
}
#footer {
height: 20px; /* Define height of the footer */
position: absolute;
bottom: 0; /* Sit it on the bottom */
left: 0;
width: 100%; /* As wide as it's allowed */
}
#content {
padding-bottom: 20px; /* This should match the height of the footer */
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="wrapper">
<div id="header">Header added just for demonstration purposes</div>
<div id="content"><div id="map-canvas"></div></div>
<div id="footer">And this is my footer</div>
</div>
</body>
</html>
提前问候和感谢.
编辑:这里是jsfiddle链接,稍有改动,但有同样的问题,如果你试图得到:标题,地图和页脚在一个视图中实际上你不能,出现滚动条因为地图正在推动页脚:http://jsfiddle.net/PYaDq/197/
我正在与这样的问题作斗争,我认为关键是绝对定位,我认为这是你想要得到的:
<html>
<head>
<style type="text/css">
html, body, #map-canvas {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
border: 0;
outline: 0;
}
#header {
top: 0;
right: 0;
left: 0;
position: absolute;
}
#wrapper {
left: 0px;
top: 40px;
bottom: 18px;
right: 0;
position: absolute;
}
#footer {
bottom: 0;
right: 0;
left: 0;
position: absolute;
width:100%;
}
#content {
top: 1px;
bottom: 0px;
/*padding-left: 10px;*/
overflow: auto;
position: absolute;
left: 0;
right: 0;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="header">Header added just for demonstration purposes</div>
<div id="wrapper">
<div id="content">
<div id="map-canvas"></div>
</div>
</div>
<div id="footer">And this is my footer</div>
</body>
</html>
你可以在这里测试一下:http://jsfiddle.net/cespinoza/s6Q4V/