Suivez les fils RSS
 

Des livres incontournables pour tout maîtriser

  • CSS avancées - vers HTML5 et CSS3
  • HTML5
  • CSS2
  • PHP5 avanc�
  • Memento MySQL
  • Memento CSS 3
  • Memento XHTML
  • WordPress 3 100% pratique
  • jQuery et jQuery UI
Rechercher dans le sujet :
Forum
» CSS et mise en forme, CSS3
» Etendre le <body> verticalement à tout l'écran
Auteur
colagen
#
Citer
14 Posts
 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)
http://www.rueverte.fr/accessoires.php 
^
gc-nomade
#
Citer
gcyrillus en mode portable
911 Posts
 bonsoir,

dans l'ordre (style en cascade) c'est: 
html {height:100%;}body{min-height:100%;}


++
GC rien , mais GC encore ...
http://yidille.free.fr/plux/valign 
^
colagen
#
Citer
14 Posts
 Ca ne fonctionne pas non plus comme ça 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.
http://www.rueverte.fr/accessoires.php 
^
Gothor
#
Citer
325 Posts
 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
Gothor
^
colagen
#
Citer
14 Posts
 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)
http://www.rueverte.fr/accessoires.php 
^
kustolovic
#
Citer
553 Posts
 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.
^
colagen
#
Citer
14 Posts
 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 ?
http://www.rueverte.fr/accessoires.php 
^
Prévenir un modérateur
Répondre au sujet
Aller à