J'ai un problème avec une mise en page - ce n'est pas en ligne partout, juste local, mais si vous copiez et collez le code ci-dessous dans une page html et le lancer localement, vous verrez le même page que moi.100% de hauteur avec pied de page fixe et Google Map
Il est très près de là. Ce que j'essaye de réaliser est une page sans barres de défilement utilisant tout l'espace vertical disponible. Oui, je peux définir "overflow: hidden" sur la déclaration de conteneur et cela aide, mais ce n'est pas tout à fait correct. Je veux que la carte google soit entourée d'une bordure 1em. J'ai ceci sur 3 côtés mais la déclaration de hauteur de 100% sur le contenu div bloque la bordure inférieure. Si vous ne réalisez pas les implications d'une div de google de la taille d'un pourcentage, alors le parent doit avoir une hauteur déclarée pour que cela fonctionne. Comme le pied de page est absolu et en dehors du flux, il n'y a pas de limite "inférieure" à travailler et la mise en page ne fonctionne tout simplement pas. Le contenu div 100% height semble essentiellement prendre sa taille de la fenêtre d'affichage et non la div contenant.
Ça me rend fou ... je n'arrive pas à comprendre comment faire ça et j'apprécierais vraiment les commentaires.
Commencez 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>
Vraiment difficile ... J'ai essayé de le tripoter pendant un certain temps. Je pense que la racine du problème est div # conteneur {hauteur: 100%} – Kasturi
Quatre ans plus tard, cela se fait beaucoup plus facilement en utilisant le [CSS Flex Box modèle] (http://stackoverflow.com/a/26558073/1269037). Toutes les autres solutions sont maladroites. –