Footer positioned to bottom, content 100% height

HTML & CSS
1

Please take a look here:

and here for the source:

I’m trying to strech the google map in full height.
But it doesn’t work…
Even if I set all divs to a height off 100%, it doesn’t work.

The only way to get the map visible is to set set a fixed px height.
how can I get the google map stretch to the top of the footer??

2

Hi jimmyjoy. Welcome to the forums. :slight_smile:

Even if I set all divs to a height off 100%, it doesn’t work.

Yeah, that doesn’t work in CSS, I’m afraid. This is tricky, but perhaps our resident experts @Paul_O_B and @Rayzur might have a solution. I’m thinking tables or display: table, but not sure. There’s more to it that just that.

3

Hi,

This relies on a fixed height header and footer and uses the sticky footer routine from the CSS faq.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
            google.load("maps", "3", {
                other_params: "sensor=false"
            });
        </script>
<script type="text/javascript">
        var map;
        var starting_lat = 0;
        var starting_lon = -30;
        var starting_zoom = 3;

        function initialize() {
            var myOptions = {
                center: new google.maps.LatLng(starting_lat, starting_lon),
                zoom: starting_zoom,
                disableDefaultUI: true,
                zoomControl: true,
                zoomControlOptions: {
                  position: google.maps.ControlPosition.RIGHT_CENTER
                },
                mapTypeId: google.maps.MapTypeId.HYBRID
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
</script>
<style type="text/css">
html, body {
	height:100%;/* needed to base 100% height on something known*/
	text-align:center;
	margin:0;
	padding:0;
}
body {
	background:gray;
	font-family:arial, sans-serif;
	color:#666;
}
#wrapper {
	position:relative; /* needed for footer positioning*/
	background:#f0f0f0;
	min-height:100%; /* real browsers */
}
* html #wrapper { height:100% }
#wrapper {
	margin:0 auto; /* center, not in IE5 */
	min-width: 1000px;
	max-width: 1600px;
	min-height:100%;
	margin-top:-56px;/*footer height - this drags the outer 40px up through the top of the monitor */
	text-align:left;
	clear:both;
}
* html #outer { height:100% }
#header {
	padding:15px 1em;
	border-bottom:6px double gray;
	height:84px;
	border-top:56px solid #fff; /* soak up negative margin and allows header to start at top of page*/
}
#footer {/* footer now sits at bottom of window*/
	margin:auto;
	height:40px;/* must match negative margin of #outer */
	clear:both;
	background:#ddd;
	border-top:6px double gray;
	height: 50px;
}
/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/* negate effect of float*/
}
h1, h2, p {
	padding:0 10px;
	margin:0 0 1em
}
#wrapper:after {/*instead of using display table for ie8*/
	clear:both;
	display:block;
	height:1%;
	content:" ";
}
#map_canvas {
	left: 380px;
	right: 200px;
	position:absolute;
	top:174px;
	bottom:0;
}
#leftcolumn {
	float: left;
	width: 380px; /*Width of left column*/
	background:#0F3;
}
#rightcolumn {
	float: right;
	width: 200px; /*Width of right column*/
	background: #FDE95E;
}
</style>
</head>
<body onload="initialize()">
<div id="wrapper">
		<div id="header">
				<h1>header</h1>
		</div>
		<div id="leftcolumn"> left column </div>
		<div id="rightcolumn"> right column </div>
		<div id="map_canvas"></div>
</div>
<div id="footer"> footer </div>
</body>
</html>