Bonjour,
j'avais déjà posté ici pour réaliser un gabarit dont le footer s'affiche correctement en bas de page lorsque le contenu est plus court. J'y étais finalement arrivé seul avec un peu de recherche.
Depuis j'ai réorganisé le gabarit, viré le menu de gauche, et tout fonctionne toujours aussi bien mais ce qui me chiffonne maintenant c'est la taille de mon div#content. Je voudrai que lui aussi, avec un contenu court, prenne toute la hauteur restante sur la page.
Voici ma structure html:
et ma css:
J'ai tester avec des min-height mais il ne sont pas pris en compte.
Auriez vous une piste ? ou est-ce carrément impossible ?
j'avais déjà posté ici pour réaliser un gabarit dont le footer s'affiche correctement en bas de page lorsque le contenu est plus court. J'y étais finalement arrivé seul avec un peu de recherche.
Depuis j'ai réorganisé le gabarit, viré le menu de gauche, et tout fonctionne toujours aussi bien mais ce qui me chiffonne maintenant c'est la taille de mon div#content. Je voudrai que lui aussi, avec un contenu court, prenne toute la hauteur restante sur la page.
Voici ma structure html:
<body>
<div id="global">
<div id="header">
<div id="header2">
</div>
</div>
<div id="center">
<div id="content">
</div>
</div>
<div id="footer">
<div id="footer2">
</div>
</div>
</div>
</body>et ma css:
* {margin:0; padding:0; border:0}
html,body {
height:100%;
background-color:#F7F7F7;
}
/******************/
/* Positionnement */
/******************/
#global{ /* ne pas modifier: permet au footer d'être en bas avec un contenu court */
min-height: 100%;
position: relative;
}
#header { /* header largeur 100% */
background-color:#000;
height: 100px;
width: 100%;
}
#header2{ /* header largeur 998px */
width:998px;
margin:auto;
}
#center{ /* ne pas modifier: permet au footer d'être en bas avec un contenu court et de conserver les bordures sur #content */
overflow: hidden;
padding-bottom:150px;
}
#content { /* contenu */
margin:20px auto;
border: 1px solid #CCC;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:998px;
}
#footer { /* Pied de page largeur 100% */
position: absolute;
width:100%;
background-color:#000;
height:150px;
bottom: 0;
}
#footer2{ /* pied de page largeur 998px */
width:998px;
margin:auto;
}J'ai tester avec des min-height mais il ne sont pas pris en compte.
Auriez vous une piste ? ou est-ce carrément impossible ?
