100% de hauteur avec pied de page fixe et carte Google intégrée

J'ai un problème avec une mise en page - ce n'est pas en ligne n'importe où, juste en local, mais si vous copiez et collez le code ci-dessous dans une page html et de l'exécuter localement, vous verrez la même page que je fais.

Il est très près de là. Ce que je suis en train de réaliser une page avec pas de barres de défilement à l'aide des toutes espace vertical disponible. Oui, je peux le mettre en "overflow:hidden" sur le récipient de la déclaration et qui aide, mais ce n'est pas tout à fait droit. Je veux avoir la carte de google, entouré d'un cadratin (1 em frontière. J'ai cela sur 3 côtés, mais le 100% de la hauteur de la déclaration sur le contenu de la div accidents de la bordure du bas. Si vous ne réalisent pas les conséquences d'un pourcentage de la taille de google map div, alors le parent doit avoir une hauteur déclaré pour qu'il fonctionne. Comme le pied de page est absolue et en dehors de la circulation, il n'y a pas de "fond" frontière de travail et la mise en page ne fonctionne tout simplement pas. Le contenu de la div à 100% de la hauteur semble essentiellement de prendre sa taille de la fenêtre et de ne pas le div contenant.

Ça me rend fou... juste ne peut pas sembler à travailler sur la façon de le faire et j'apprécierais vraiment une entrée.

Commencer ici:

<!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><title>Google map test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:fff;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 { 
font:1.5em georgia,serif; 
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif; 
margin:0 0 0.5em;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:960px;
background:#fff;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
/*height:auto !important;  real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
border-bottom:1px solid #ccc;
border-left:1em solid #ccc;
height:108px;
position:relative;
}
div#header h1 
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#header2
{
border-bottom:1px solid #ccc;
border-left:1em solid #999;
height: 40px;
position: relative;
}
div#header2 p 
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#headerInternal
{
border-bottom:1px solid #ccc;
border-left:1em solid #cc3300;
height: 40px;
position: relative;
}
div#headerInternal p 
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#headerInternal2
{
height: 40px;
position: relative;
}
div#headerInternal2 p 
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#rightCol 
{
float:right;
width:29%;
padding-bottom:5em; /* bottom padding for footer */
}
div#content 
{
float:left;
width:70%;
height:100%; /* fill that hole! */
border-right:1px solid #ccc;
}
div#content p {
}
div#footer {
position:absolute;
clear:both;
width:100%;
height:40px;
bottom:0; /* stick to bottom */
background:#fff;
border-top:1px solid #ccc;
}
div#footer p {
padding:1em;
margin:0;
}
.paddedContent 
{
height:100%;
margin: 1em;
}
</style> 
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(52.397, 1.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="container"> 
<div id="header"> 
<h1>Title here...</h1> 
</div> 
<div id="header2"> 
<p>Secondary menu...</p>
</div> 
<div id="rightCol">
<div id="headerInternal2"> 
<p>Right Header</p>
</div> 
<p class="paddedContent">This is the right column</p>
</div>
<div id="content"> 
<div id="headerInternal"> 
<p>Page Context Menu</p>
</div> 
<div class="paddedContent">
<div id="map_canvas" style="width: 100%; height: 100%;"></div> 
</div>
<div id="footer"> 
<p>This footer is absolutely positioned</p> 
</div> 
</div> 
</div> 
</body>
</html>

source d'informationauteur Carl