Header puis bloc occupant 100% du reste de la page

Marsh Posté le 19-06-2010 à 13:54:21

Bonjour à tous !! :hello:

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... :pt1cable:

Quelqu'un a t-il une idée du souci ?
Merci d'avance,

Olivier

Reply

Marsh Posté le 19-06-2010 à 13:54:21

Reply

Marsh Posté le 19-06-2010 à 14:40:06

Pourquoi ne pas mettre tous simplement ton background sur le body ? et pas sur le bloc de contenu ? t'aurai plus de soucis de hauteur de page.

A moins que je n'ai pas compris ton problème.

Message cité 1 fois

---------------
Dépots d'annonces gratuites entre particulier : http://www.mini-annonces.fr/

Reply

Marsh Posté le 20-06-2010 à 14:44:14

kokusho a écrit :

Pourquoi ne pas mettre tous simplement ton background sur le body ? et pas sur le bloc de contenu ? t'aurai plus de soucis de hauteur de page.

A moins que je n'ai pas compris ton problème.

Hey, merci d'avoir répondu !
Bon c'est vrai que je n'avais pas pensé à faire ça, mais il se trouve que ça ne va pas être possible parce qu'en fait mon body a déjà une image de fond (des rayures) et donc je veux ajouter sur ces rayures la partie du "global"...

Reply

Marsh Posté le 20-06-2010 à 22:48:39

Dis nous le but recherché afin de pouvoir t'aider...

Tu peux faire en sorte que ta <div id="global"> soit fils unique du <body>, cette <div> contenant ton header/contenu/footer...

Message édité par abais le 22-06-2010 à 11:14:35

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Reply

Marsh Posté le 20-06-2010 à 23:04:41

tu peux aussi attribuer une image a HTML

Reply

Marsh Posté le 21-06-2010 à 16:44:31

abais a raison, tu appliques ton min-height:100% à une div qui englobe header et contenu et ça devrait rouler

Reply

Header puis bloc occupant 100% du reste de la page

Sujets relatifs:

Leave a Replay