[HTML/CSS] Espace au fond d'une page avec un div height = 100%

Bonjour,

J'ai déjà fait ça a plusieurs reprises et je dois bien dire que je ne suis pas un pro CSS. J'ai créer une versin rough (c'est à dire que le CSS est dans ma page HTML pour le moment) d'une interface d'un site. J'ai définis html et body à 100% en height et width et ma div principale à 100% en height et width également. Seulement, quand je met du contenu dans ma div, si le contenu dépasse la taille de ma fenêtre, il faudra que je scroll pour voir le reste, ce qui est logique. Seulement mon background ne se répète pas sur la partie scrollée !!

Un apercu :

http://img223.imageshack.us/img223/9720/apercumk0.jpg

Voilà la page en question.

Qu'est-ce qui cloche ? (si vous avez une haute résolution, réduisez la hauteur de la fenêtre jusqu'à ce que le scroll apparaîsse)

Note : je n'ai pas testé sous IE, par contre testé sous Firefox et Safari et le comportement est le même.

Merci.

Hello,

Tu peux regarder ton site sur le navigateur opera et tu verras à quoi il ressemblera sur tous les navigateurs récents lorsque tu auras rajouté le doctype au haut de ta page.

En mode standard, la propriété height en % ne peut s'appliquer que si le height du parent est clairement défini, ce qui n'est pas le cas dans ta structure:

html:100%, body 100%, 1er div min-height 100%, 2ème div height 100%

Vu que ton premier div n'a pas de height le 2ème ne peut pas attribuer de hauteur en % et prend donc la valeur auto.

Comme tu n'as pas mis de doctype, FF interprète néanmoins ce height de 100%, seulement il te piège plus loin, puisque ton 2ème div ayant une hauteur de 100% (de la taille de la fenêtre en réalité et non de la hauteur réel du 1er div), le premier s'arrête aussi à cette même hauteur de 100% de la fenêtre et donc ton fond n'est plus visible.

Pour faire le montage que tu souhaites, vu tes 2 images de fond et le min-height de 100%, tu ne peut pas passer par une imbrication de div mais plutôt positionner ton footer, par exemple, en position absolute au bas de ton 1er div.

Abrutis que je suis j'ai repris un fichier html et j'avais complétement oublié le doctype. Pour tout le reste je vois bien ce que tu veux dire, je n'avais jamais utilisé le min-height mais j'en avais entendu parler. Je vais essayer de voir ça. En tout cas merci beaucoup.

Je mettrai résolu quand j'aurais un aperçu fonctionnel mais ça risque d'être bon.

:D

Finalement, malgré l'aide, je n'ai toujours pas réussi à me débarasser de cette espace etre mo fond et la fin de la fenêtre lorsque je scroll. Pourtant j'ai bien définis les height en 100% pour la première et la seconde div.

Et je n'ai pas réussi à mettre ma div de footer au fond de ma page avec la position absolute : comment faire ça ?

Je ne vois toujours pas de doctype en haut de page... ?

Comme je l'ai indiqué ci-dessus, donner un height de 100% à un div dont le parent n'a pas de height renseigné ne sert à rien en mode standard et ne donne pas l'effet que tu souhaites sur FF en mode quirks.

Tu peux procéder de la manière suivante:

• Intégrer la bordure grise à ton image de fond fondC
• Donner une position:relative à ton 1er div (celui qui contient le min-height de 100%) afin qu'il serve de référence pour le positionnement absolu
• Fermer ton 2ème div juste après son ouverture (donc il n'englobe rien du tout), le positionner en absolute bottom:0, lui donner les dimensions voulues
• Selon le comportement que tu souhaites (que ton texte vienne par-dessus ta déco ou pas) tu vas ajouter un position relative ou un padding-bottom à ton contenu

Désolé je n'avais pas uploader la page. J'avais travaillé en local.

Malheureusement malgré tes indications je n'ai pas réussi à donner quelque chose de concluant. J'ai mis la dernière version en ligne, si tu pouvais juste m'indiquer ce qui cloche ?

Merci.

Au risque de me répéter: tu ne peux pas passer par une imbrication de div.

Ton problème est que ton premier div contient une hauteur de 100%, donc, forcément, il aura toujours cette hauteur quand bien même le contenu est plus long. Tu dois, à lui, lui attribuer un min-height de 100% et un height que pour IE6- de la manière que tu souhaites et un position:relative.

Ensuite, ton div qui contient ton image de pied de page, tu le positionnes en absolute comme décrit ci-dessus. Donc qqch du genre:

Code:

---

1 2 3 4 5 6

<body style="background-image: url(images/bg2.gif); font-family: arial; font-size: 10px; color: rgb(102, 102, 102);"> <div style="background: url(images/fondC.gif) repeat-y center top; min-height: 100%; text-align: center; width:698px; margin:0 auto; padding:0 101px; position:relative;"> <div style="background: url(images/fondF.jpg) no-repeat center bottom; position:absolute; bottom:0; left:101px; width: 698px; height:100px;"></div> <div style="background: transparent url(images/headerB.jpg) no-repeat scroll center top; height: 140px;"> &nbsp; </div>

---

Maintenant, dans cet exemple, j'ai fait au plus simple un exemple pour te montrer le principe du footer, après, si tu veux que l'ombre ne soit pas prise en compte pour le scroll horizontal (ce qui, je suppose, était le but de ne pas avoir donné de width au premier div), il faudra revoir un peu le montage.

Salut,

J'ai rencontré un problème simlilaire (dimensionnement et positionnement ok sous IE et safari mais problème de dimensionnement avec FF et Opéra)

J'ai également effectué quelques recherches sur le net dans différents forums et tutoriels et malgré les soit-disant solutions rien ne fonctionnait complètement.

Je m'explique :

l'affectation de height:100% à html et body ne fonctionne que lorsque le contenu de la page est plus petit que la fenêtre du navigateur (soit sans ascenseur)
Si jamais il y a un ascenseur alors le problème est le suivant : la valeur de height "réellement" utilisée semble être la hauteur de la zone visible du navigateur (l'image alignée en bas de page reste toujours visible quelle que soit la position de défilement de l'ascenseur alors que mon background n'est pas fixed)

Avec min-height:100% sur html le problème ci-dessus disparaît mais une bande "blanche" apparaît en bas de la page dès l'apparition de la scrollbar lorsque l'on réduit la taille de la fenêtre du navigateur (le problème de bande "blanche" avec Firefox disparaît en supprimant "overflow:visible" dans mon div #main mais reste présente avec Opera).

J'ai enfin trouvé une astuce pour régler le problème avec Opera... (c'est une astuce que j'ai déjà utilisé ailleurs mais passons)
Il suffit de "forcer" une bordure en bas du html comme ceci : "border-bottom: 0.01em transparent solid;" 0.01em permet d'avoir une ligne extrèmement fine et par conséquent non visible.

;)

ci-joint un extrait de code qui fonctionne pour moi sur IE7, FF3, Safari et maintenant avec Opera9 :mrgreen: :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> /* modifications de présentation spécifiques TxShape */ * { margin:0; padding:0;} html { min-height: 100%; border-bottom: 0.01em transparent solid; } body { height: 100%; background: white url(imgs/footer_img.gif) repeat-x scroll left bottom; width: 100%; } #main { height: 100%; min-height: 400px; background: transparent url(imgs/header_img.gif) repeat-x scroll left top; margin: 0; padding: 10px; width: auto; } </style> </head> <body> <div id="main"> ... ici un contenu quelconque ... </div> </body> </html>

---

J'ai enfin trouvé comment le faire fonctionner avec opera.

J'ai édité mon message précédent pour y inclure l'astuce...

;)