Menu
Im trying to fit a googlemap map between a header and a footer, as main content, but the map get the 100% and pushes the footer down, I want fit the map between them so that if I resize the window all content will adjust automatically without appear a left bar to scroll the content, but something I missing, please could somebody give me a hand with it?
<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>
Greetings and thanks in advance.
Edited : Here the jsfiddle link, with a little changes, but with the same issue, if you try to get: the header, the map and the footer in one view actually you can't, appears the scroll bar because the map is pushing down the footer: http://jsfiddle.net/PYaDq/197/
857
I was fighting with issues like this, I think the key is the absolute positioning and I think this is what you're trying to get:
<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>
You can test it here: http://jsfiddle.net/cespinoza/s6Q4V/
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
