我试图在页眉和页脚之间放置一个 googlemap map ，作为主要内容，但是 map 得到 100% 并将页脚向下推，我想在它们之间放置 map ，这样如果我调整窗口大小所有内容将自动调整而不会出现左栏来滚动内容，但我缺少一些东西，请有人帮我吗？
<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 链接，稍作更改，但存在同样的问题，如果您尝试获取:一个 View 中的页眉、 map 和页脚实际上您不能，因为 map 正在推送，所以会出现滚动条在页脚下方: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/
关于html - 尝试在页眉和页脚之间放置 html 内容(googlemap)-CSS-HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16112238/