Comment remplir automatiquement l'espace entre en-tête et pied de page avec google map?

Je voudrais créer une page web avec l'en-tête, le pied de page, la colonne de gauche (colonne 25% large qui contient des boutons, etc.) et la zone de contenu principal qui doit être remplie avec google map.Comment remplir automatiquement l'espace entre en-tête et pied de page avec google map?

I a essayé de modifier le contenu de this answer la manière suivante:

<body onload="initialize()"> 
<div id="wrapper"> 
    <div id="header">Header</div> 
    <div id="leftcolumn">Left Column</div> 
    <div id="map_canvas"></div> 
    <div id="push"></div> 
</div> 
<div id="footer">footer</div> 

html, body { 
margin: 0px; 
padding: 0px; 
height: 100%; 
width: 100%; 
} 
#wrapper { 
    min-height: 100%; 
    height: auto; 
    height: 100%; 
    margin: 0 auto -100px; 
    background-color: red; 
    border: 1px solid black; 
    } 

#header { 
background: #438a48; 
height:100px; 
} 
#leftcolumn { 
background: #2675a8; 
float: left; 
width: 25%; 
height:auto; 
height:100%; 

} 

#map_canvas { 
background: #000; 
float: right; 
width: 75%; 
height:100%; 
} 

#footer, #push { 
background: #df781c; 
height:100px; 
}

mais la hauteur de paramètre: 100%; Sur map_canvas et #leftcolumn, le contenu dépasse la taille de l'écran mais si la hauteur n'est pas spécifiée, la carte ne peut pas être vue.

Quelqu'un peut-il modifier/créer la mise en page afin de remplir automatiquement la zone de contenu avec google map?

Merci!

Source

2010-02-07 Niko Gamulin

Votre problème est que vous avez un en-tête 100px, et vous ne pouvez pas soustraire cela de la hauteur de 100% que vous donnez à map_canvas. Donc, la hauteur totale de la construction est bien sûr 100% de la hauteur du corps, plus 100 pixels qu'elle déborde vers le bas.

D'habitude, je le résous de cette façon. Je déteste utiliser position: absolute, sauf si vraiment nécessaire, mais je ne peux pas voir une meilleure façon:

#map_canvas { 
background: #000; 
position: absolute; 
left: 25%; 
right: 0px; 
bottom: 0px; 
top: 0px; 
}

Source

2010-02-07 19:05:29

Comment remplir automatiquement l'espace entre en-tête et pied de page avec google map?

Répondre

Questions connexes