28172 sujets

CSS et mise en forme, CSS3

Etendre le <body> verticalement à tout l'écran

Bonjour,
Sur la page ci-dessous, j'aimerais que le fond beige prenne tout l'espace vertical que permet l'écran, de façon à ce que il ne se coupe pas abruptement au niveau du footer comme actuellement.
http://95.142.164.110/shipping_info.php

Visiblement, avec firebug et sous chrome, c'est le body qui ne s'étend pas plus loin que ce que son contenu nécessite.

Mon css pour la balise body, html et le div #sous_body qui contient le background beige est :
html {
min-height:100%;
}
body {
	background:#F0F0E3 url(img/bg-body.jpg);	
	min-height:100%;height:100%;
	line-height:18px;
	color:#3f3e35;
	font-size: 12px;font-family:Verdana,sans-serif;
}
#sous_body{
min-height:100%; height: 100%;
	background:url(img/bg-main.png) repeat-y 50% 0;
	margin-right:10px;
}



Vous avez une idée ? Si je met height:100% pour la balise <html> cela marche, mais évidemment si la page est plus longue que l'écran cela pose problème.

Merci de votre aide !
Modifié par colagen (20 Feb 2012 - 20:57)
Ca ne fonctionne pas non plus comme ça Smiley ohwell (Ca ne change rien visuellement à la page.)

Bon il me reste toujours la solution du javascript, j'aimerais éviter mais si je n'ai pas d'autre choix c'est mieux que rien sans doute.
Chez moi, avec Firebug, le fait de passer html > min-height en html > height permet d'afficher le résultat que tu recherches sur ton site :o
Oui, si je fais
html {height:100%;}
body {min-height:100%;height:100%;}


Effectivement, ca étend le fond beige, mais ca le restreint aussi à 100% de l'écran et pas plus. Et donc si la page fait plus de 100% de l'écran, comme la majorité des pages quoi, ca ne marche pas comme il faut.
Modifié par colagen (22 Feb 2012 - 13:45)
Modérateur
Bonjour dans ton cas, c'est sous-body que tu veux sur toute la hauteur, donc:


html {height:100%;}

body {height:100%;}

#sous_body {min-height:100%;}

J'ai testé et ça fonctionne bien. (Mais surtout vire bien le height: 100% sur sous_body et évite d'avoir les deux dans la même déclaration, ça ne sert à rien.
Oui, ca ca fonctionne nickel sous firefox, chrome et IE10

Alors le div #sous_body peut faire plus de 100% de hauteur malgré la déclaration body {height:100%} ?

Un div peut être plus grand que son div parent ?
Sujet clos
Aller à