Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Simple CSS question header, footer and expanding middle

W

whitedragon101

macrumors 65816
Original poster
Sep 11, 2008
1,349
339
I have four DIVs

wrapper = contains everything height and width should be 100%
header = a header I want to be 50 pixels high and 100% width
mapcontent = a google map I want to be 100% width and 100% height
footer = a footer I want to be 50 pixels high and 100% width locked to the bottom of the screen not matter the screen size

Basically I need header always the same height locked to the top and footer always the same size locked to the bottom and malcontent taking up all space in between.

In the code below the footer does not push the container up so the footer covers the lower map controls. Even if you delete the footer div the lower part of the map_container div is off the bottom of the visible window area.

Any help appreciated :

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>

<style>
html, body {height: 100%}

#wrapper 
{
	width:100%;
 	height:100%; 
	min-height:100%; 
	background-color: #CFF;  /* LIGHT BLUE */
}
#header
{
	height: 50px;
	width:100%;
	background-color: #F0F; /* PINK */
}
#map_container
{
	height: 100%;
	min-height:100%; 
	width:100%;
	overflow-y: hidden;
	background-color: #06F;  /*DARK BLUE */
}
#footer
{
	position: fixed;
	z-index: 10;
	height: 50px;
	width: 100%;
	background-color: #0F0; /* GREEN */
	bottom: 0px;
}
</style>

</head>

<body>

<div id="wrapper">

<div id="header"></div>
	
<div id="map_container">
    
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d8120655.7476568185!2d34.89248265!3d-6.372825300000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x184b51314869a111%3A0x885a17314bc1c430!2sTanzania!5e0!3m2!1sen!2suk!4v1396366970642" width="100%" height="100%" frameborder="0" style="border:0"></iframe>

</div> 
 
 <div id="footer"> </div>		

</div>  <!-- CLOSE WRAPPER DIV -->

</body>
</html>
 
I might be wrong but in this case you have a map with its + and - controls being pulled in with an iframe. You have the height of the map set to 100% extending to the bottom of the browser window. You also have a fixed position footer with a z-index higher that the map putting it right over your controls. Unless you have control over where the maps navigation is the footer will ALWAYS cover it, the way you currently have this set up. I think a fixed footer in the case might not be the most elegant way of doing this however if you really have to, try adding padding-bottom: 50px; to the bottom of your #map_container. See if that gets you close enough to where you need to be.
 
Here you go :cool:

People hate <table> but sometimes it's what you need to get the job done :D

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>

<style>
html, body {height: 100%; margin:0;padding:0}

#wrapper 
{
    width:100%;
    height:100%; 
    min-height:100%; 
    background-color: #CFF;  /* LIGHT BLUE */
}
#header
{
    height: 50px;
    width:100%;
    background-color: #F0F; /* PINK */
	position:fixed;
	top:0;
}
#map_container
{
    height: 100%;
    width:100%;
    overflow-y: hidden;
    background-color: #06F;  /*DARK BLUE */
}
#footer
{
    position: fixed;
    z-index: 10;
    height: 50px;
    width: 100%;
    background-color: #0F0; /* GREEN */
    bottom: 0px;
}
</style>

</head>

<body>

<div id="wrapper">

	<table border="0" cellpadding="0" cellspacing="0" style="height:100%; width:100%;">
		<tr style="height:50px;">
			<td>
				<div id="header"></div>
			</td>
		</tr>
		<tr style="height:100%;">
			<td>
				<div id="map_container">
					<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d8120655.7476568185!2d34.89248265!3d-6.372825300000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x184b51314869a111%3A0x885a17314bc1c430!2sTanzania!5e0!3m2!1sen!2suk!4v1396366970642" width="100%" height="100%" frameborder="0" style="border:0"></iframe>
				</div> 
			</td>
		</tr>
		<tr style="height:50px;">
			<td>
				<div id="footer"> </div>  
			</td>
		</tr>
	</table>

</div>  <!-- CLOSE WRAPPER DIV -->

</body>
</html>

Letme know if this is what you wanted.

EDIT: I've also added "margin:0; padding:0" to your html and body style declaration, as on my browser (Chrome, Windows) there was a white border around the wrapper DIV.
 
Last edited:
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back