Geek Answers Handbook

Attempting to set html content (googlemap) between header and footer - CSS - HTML

Im trying to map the googlemap map between the header and footer as the main content, but the map gets 100% and pushes the footer down, I want the map to be between them so that when the window is resized, all contents will automatically change without the left panel appearing for scroll through the content, but something is missing me, please can someone help me?

<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 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 is the jsfiddle link with slight changes, but with the same problem, if you try to get: the header, map and footer in the same view, you really cannot, the scroll bar appears because the map pushes the footer: http: / /jsfiddle.net/PYaDq/197/

+6
source share
2 answers

I struggled with such problems, I think the absolute positioning is the key, and I think this is what you are 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/

+5
source

I would highly recommend looking up css3 media queries as an option. general search will have many good resources.

Media queries are designed to change the width of the device (and browser) and have a similar format for other style tags. you might have something like:

 @media screen and (min-width: 400px) and (max-width: 700px) { #content { } }

this will override the style settings at the borders you specify.

hope this helps.

0
source

More articles:


All Articles