Bonjour à tous !!
Alors voilà mon problème aujourd'hui, en fait mon code HTML ressemble à ça :
Code :
- <html>
- <head>
- </head>
- <body>
- <div id="header">
- </div>
- <div id="global">
- <div id="contenu">
- </div>
- <div id="pieddepage">
- </div>
- </div>
- </body>
- </html>
|
Et mon CSS :
Code :
- html
- {
- height: 100%;
- }
- body
- {
- background-image: url("/images/rayures.png" );
- height: 100%;
- margin: 0;
- }
- #header
- {
- background-color: gray;
- width: 100%;
- height: 200px;
- margin: 0;
- }
- #global
- {
- width: 1400px;
- background-image: url("/images/fond.png" );
- background-repeat: repeat-y;
- margin: auto;
- }
|
Et donc en fait mon header part du haut de la page et descend sur 200pixels, mais ensuite j'aimerais que mon bloc "global" occupe au minimum le reste de la page, pour que mon background descende jusqu'en bas de la page, voire plus si le contenu l'exige. Mais le problème c'est que lorsque j'essaye de mettre à mon bloc global "min-height:100%" à ce moment là il n'occupe pas 100% de l'espace restant (c'est-à-dire 100% - 200px du header) mais il occupe 100% de la page web, et donc j'ai une barre de défilement qui apparait...
Quelqu'un a t-il une idée du souci ?
Merci d'avance,
Olivier