[RESOLU] -> par 2 supers conseils !Soucis height 100%

Bonsoir chez amis CSSeux,

J'ai un problème, surement pas bien méchant, mais je n'arrive pas à trouver la solution, .. et les archives du forum ne me l'ont pas apporté.

Je suis en train de refaire une tite jeunesse à mon site, et je suis sur un os, en fait je voudrais que le background de mon container principal aille jusqu'en bas de la page... or impossible, j'ai essayé de caser des height:100% un peu partout, rien n'y fait.

Donc, quand la page est plus petite que l'écran utilisateur, .. le bg s'arrête, c'est crado.

Mieux qu'une longue explication, une belle url.

-> page longue, pas de problème:
http://olivierlivet.com

-> page courte, problème:
http://olivierlivet.com/Realisation-videos-olivier-livet.html

Si qqn a une idée, je lui en serai très reconnaissant ! (ça me semble tout con comme obstacle .. mais je trouve pas )
Modifié par ol.li (27 Apr 2006 - 01:13)

Deux solutions :

1 – Appliquer l'image de background à body plutôt qu'au conteneur principal.

body{
	background: black url(img/background.jpg) repeat-y center;
}

Et on vire le background du conteneur, le height: 100% du conteneur et celui de body, histoire de ne pas avoir ce scroll inutile quand la page est courte (problème du scroll inutile : il fait croire à l'utilisateur qu'il y a un contenu à voir en scrollant, et il n'y en a pas…).

2 – bloc conteneur en height: 100%
Donner une hauteur en % à un élément implique que la hauteur de son élément parent est connue du navigateur (ben oui, 100% c'est bien joli, mais 100% de quoi ?). Bref, il faut mettre un height: 100%; non seulement au conteneur, mais aussi à tous ses ancêtres directs, jusqu'au plus basique.

html, body, #container {height: 100%;}

Là, ça marche.
Problème rencontré : on a un scroll inutile. En effet, certains de ces blocs en hauteur 100% ont des marges ou des padding, qui se rajoute à cette hauteur. Or, il ne faut pas dépasser 100% d'un seul cheveu si l'on ne veut pas de scroll inutile. Il faut donc s'y employer.

html, body, #container {
	height: 100%;
	margin-top: 0; margin-bottom: 0;
	padding-top: 0; padding-bottom: 0;
}

Voilà, c'est fini… enfin non, il nous reste un problème. Dans certains navigateurs, la fusion des marges entre un élément et son bloc parent peut faire que le bloc parent reçoit une marge là où il devait avoir une marge nulle. Il faut donc bidouiller pour éviter ça. En gros, ça demande de supprimer le margin-top du premier élément dans #container, et le margin-bottom du dernier élément dans #container.

Plus d'infos sur la fusion des marges :
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html
Modifié par mpop (27 Apr 2006 - 00:29)

bonjour,

je te propose un autre regard :

et une modification relativement simple du css que tu as deja :
ajoute dans le css

html {height:99%;/* ou 100% si tu veut conserver le scroll sur toutes les pages et ainsi eviter un effet de "saut" quand tu passe d'une page a faible contenu a une longue */}

et la modif suivante pour le conteneur:

#container{
position:relative;
margin-top:0px;
margin-left:auto;
margin-right:auto;
width:655px;
min-height:100%;/* ic une hauteur minimale de 100% pour etirer le conteneur a toutes la hauteurs de la page même si il est vide , et ainsi dessiner le fond correctement */
_height:100%;/* n'oublions pas d'indiquer aussi a IE une hauteur minimale de 100% , car IE applique le height comme un min-height */
background-image:url(img/background.jpg);
}

voila c'est tout pour ce que je propose ...


je prefere garder le fond dans le conteneur car une marge gauche "fantome" (je ne connais pas le nom qui est donné a ce comportement) d'1 px aparrait dans IE .
Ce decallage est parfois perceptible selon les design ce decallage d'1px des differents fond peut apparaitre et semblait bien frustrant .

++

Nickel,

... merci beaucoup à vous 2 pour vos réponses !!!

C'est vraiment cool, j'apprends beaucoup à pouvoir profiter d'avis aussi éclairer !

Merci !