Je dispose du code HTML suivant pour construire une page centrée de 900 pixels de large, avec un en-tête, un pied de page et une section de contenu :
<body>
<div id="mainMaster">
<div id="main">
<form runat="server">
<div id="header">
</div>
<div id="content">
</div>
</form>
</div>
</div>
<div id="footer">
</div>
</body>La mise en page est stylisée à l'aide des feuilles de style CSS suivantes (approximatives) :
html, body
{
height: 100%;
}
#mainMaster
{
min-height: 100%;
background: url(../Images/Background.png);
}
#main
{
width: 930px;
margin: 0 auto;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#header
{
}
#footer
{
background-image:none;
background-color:White;
position: relative;
margin-top: -80px; /* negative value of footer height */
margin-left: auto;
margin-right: auto;
width: 930px;
height: 80px;
clear: both;
}
#content
{
position:relative;
overflow:hidden;
height:100%;
background-image:none;
background-color:White;
}Le CSS était à l'origine basé sur une disposition que j'ai trouvée sur l'internet pour les "sticky footers" (pieds de page collants). Elle fonctionnait parfaitement avec un pied de page collant, mais j'ai ensuite rencontré ces problèmes :
1) Le "contenu" n'est jamais agrandi. C'est un gros problème sur certaines de mes pages parce que les contrôles internes sont réglés sur une hauteur de 100 %. Comme le contenu n'est pas étiré, les contrôles s'affichent en taille réduite.
2) Je viens d'ajouter une image et une couleur de fond. Cet arrière-plan ne doit pas apparaître dans les volets de contenu du milieu. Comme le "contenu" n'est pas complètement étiré, l'image d'arrière-plan apparaît aux mauvais endroits.
Je préfère un correctif CSS uniquement (c'est-à-dire pas de hacks ou de JS). Vous avez de l'aide ?
