Height à 100% pour un fond de page total

Salut à tous !


petit souci récurrent chez moi, impossible de faire en sorte que mon fond de page colle correctement à mon bas de page, sur les pages trop courtes j'ai un fond noir en bas de page.
le site en question : http://tapisserieaubusson-patrickguillot.com/
il faut aller voir la rubrique photos sur un pc avec une bonne résolution pour constater le souci.

j'ai tenté moult trucs, dont les astuces qu'on m'avait donné récemment pour une autre page :
- fondepage, contenu ou main_bg avec height à 100%
- un overflow hidden sur ces memes calques
- un padding bottom sur mon power_by et meme sur contenu

rien n'y fait, dans le meilleur des cas ça reste comme c'est, autrement c'est bug sur bug ce qui parat normal...

si quelqu'un voit le truc je suis preneur...

Merci
Modifié par zepokpok (30 Jun 2010 - 16:27)

Bonjour,

Voici un très bon début de piste directement sur Alsa'
http://www.alsacreations.com/actu/lire/92-height-100.html

Merci, bon courage

Merci, j'ai parcouru avec attention ce document, ça me renseigne sur pas mal de trucs, mais j'ai beau avoir fixé mon body comme mon html à 100% le problème reste entier.
page_bg prenait le pas sur le body pour le height à 100%, je l'ai donc viré, mais ça ne change rien...

si vous avez une autre piste je suis tout ouïe

salutations...

un truc tout bête mais ton contenu avec l'image de fond est un div...

pourquoi n'insère tu pas tout simplement un min-height ???

Hello,

Pour les min-height:100%, il faut bien comprendre la logique des hauteurs en 100%, ça ne marche pas par l'opération du Saint-Esprit ces choses là.
En plus des réserves habituelles sur les hauteurs en pourcentages, il faut prendre en compte une subtilité: on ne peut pas avoir deux blocs en min-height:100%.

Si je regarde le site, je vois deux images qui doivent apparaitre sur toute la hauteur de la page: l'illustration en fond à droite, et l'image qui dessine la colonne de gauche.
Pour l'illustration au fond à droite, je la placerais comme image de fond de l'élément BODY. Ce n'est pas bien compliqué, on aura juste besoin d'utiliser background-position efficacement (pour rappel, si je veux que mon image s'affiche le plus à droite possible, et en haut avec 100px de vide avant, j'écris background-position: right 100px;).

Ce changement devrait permettre de se débarrasser de la DIV #fondepage qui ne sert plus à rien. En passant, il semblerait que #main_bg ne servent à rien non plus. Il y a du déchet dans cette structure HTML. Je me demande aussi pourquoi on a des align="left" dans le code (faire ça en CSS...), un <table class="contentpaneopen"> qui me laisse perplexe (ce n'est pas un tableau de données, et je ne comprends pas trop l'utilité de ce balisage supplémentaire), etc.

Bref, on pourrait avoir une structure avec UN SEUL div conteneur global. C'est cet élément qui pourrait être en min-height:100% (à partir du moment ou les éléments HTML et BODY sont bien tous les deux en height:100%), et avoir comme image de fond l'image qui dessine la colonne de gauche.

hello !

merci de ta réponse !

ok pour l'image sur le body, je vais faire ça, c'est une bonne idée effectivement.

Concernant main_bg et contentpaneopen, nous sommes sur du joomla, ces balises appartiennent au code de la structure du cms, je vais difficilement m'en passer

je vais modifier la structure selon tes conseils déjà et voir ce que ça donne, merci beaucoup

re !

bon j'ai viré #fondepage comme prévu, j'ai eu un souci en mettant le background position, je n'arrivais pas à rentrer tous mes parametres donc je m'en suis passé, j'ai simplement agrandi mon image de 217px vers le haut pour la faire apparaitre où je le souhaitais dans le body, merci

ensuite j'ai tenté de coller un height:100% sur #contenu mais ça buggait, marche beaucoup mieux avec un min-height

bon maintenant c'est acceptable, juste un petit truc, je me retrouve avec un espace créé sous mon footer #power_by (qui n'en est pas vraiment un).. c'est le min-height qui crée ce phénomène, si vous voyez pourquoi faites moi signe, merci d'avance