[Résolu] Blog - Hauteur du bloc principal

Mon site : http://www.etiennechampollion.com

Bonjour,

Sur mon blog, j'ai un <div> nommé #wrapper qui contient tout, sauf le #footer, que j'ai "sorti" pour qu'il se place automatiquement tout en bas (avec clear: both).

Je voudrais faire en sorte que le #wrapper adapte sa hauteur en fonction du contenu. Si je mets une hauteur fixe en px (1622px, la hauteur de l'image de fond), ça déborde s'il y a trop d'articles. Pour l'instant j'ai mis 2500px pour être tranquille (pour que la page actualités ne déborde pas) mais ce n'est pas très propre et pas pérenne.

Si je ne spécifie pas de hauteur, l'image de fond disparaît (en fait le <div> semble devenir invisible, car même une couleur de fond n'apparaît pas).

Comment puis-je faire pour que le bloc #wrapper adapte sa hauteur, de sorte que le #footer soit toujours tout en bas ?

Merci
Modifié par Arnaud04 (23 Aug 2011 - 20:55)

Bonjour,

Une petite recherche dans la section apprendre du site (et sur le forum) t'aurais permis de trouver cette astuce.

Merci de cette réponse, en fait j'avais tenté ce tutoriel : http://www.alsacreations.com/astuce/lire/51-hauteur-100-element.html , que je n'avais pas réussi à mettre en œuvre, raison pour laquelle j'ai posé la question sur le forum.

J'ai bien lu le tutoriel que tu proposes.

Il permet d'empêcher que le contenu des articles ne vienne par-dessus le footer. Mais ça j'avais déjà réussi à le faire grâce à clear: both.

Mon problème actuel n'est pas celui-là. Le footer est bien positionné en-dessous des flottants, pas de souci.

Le problème c'est de faire en sorte que le wrapper adapte sa hauteur au contenu, afin que l'image de fond continue de se répéter. Si je mets la hauteur du wrapper en fixe, en cas de dépassement il n'y a plus de fond.

Je ne sais pas si je suis clair, je n'utilise peut-être pas les termes appropriés.

En fait, j'ai bien sur le site un élément à hauteur variable.

Dans la colonne latérale de droite, j'ai une classe .widget, avec un .widget ul qui s'étire à la hauteur nécessaire, en mettant un fond blanc transparent.

J'aimerais reproduire ceci avec mon <div> principal, le wrapper.

Salut.

C'est quelque chose comme ça que tu cherches : Page sur toute la hauteur de la fenêtre, avec pied de page en bas ?
Modifié par Florian_R (23 Aug 2011 - 16:05)

Non, je ne pense pas.

Enfin si, c'est ça, mais le positionnement du footer fixe en bas, qui est expliqué c'est déjà résolu.

Quand j'ajoute des articles test sur http://www.etiennechampollion.com/actualite/ , le footer se place bien en-dessous.

Je voudrais maintenant pouvoir attribuer une image de fond à mon div #wrapper. Et l'image n'apparaît que si le div a une hauteur fixe. Donc comment faire ?

En fait, le truc c'est que ton wrapper ne contient rien. Ou plutôt, tout ce qu'il contient est en float (le content en float:left, et la sidebar en float:right).
Deux possibilités : tu enlèves le float:left du #content, ce qui t'oblige à mettre le sidebar en premier dans le html, puisque les flottants doivent se trouver avant les non-flottants.
Ou bien tu ajoutes juste à la fin de ton #wrapper, dedans, un élément sur lequel tu appliques un clear:both.

En l’occurrence, Laurie-Anne t'avais mis sur la bonne piste.

Ton footer en clear:both se place bien sous les flottants, mais ce n'est pas pour autant que #wrapper les réintègre.


EDIT: Grilled, ça m'apprendra à faire 2 choses en même temps.
Modifié par Florian_R (23 Aug 2011 - 17:18)

AkaiKen a écrit :
En fait, le truc c'est que ton wrapper ne contient rien. Ou plutôt, tout ce qu'il contient est en float (le content en float:left, et la sidebar en float:right).

Ça y est. J'ai enfin compris. Merci pour cette explication.

Du coup je comprends le lien donné par Laurie-Anne, que j'ai du coup relu. Et tout le reste.

a écrit :
Ou bien tu ajoutes juste à la fin de ton #wrapper, dedans, un élément sur lequel tu appliques un clear:both.

J'ai fait cela, ça fonctionne très bien. Merci à tous.

Super ! Il est juste un peu dommage que l'image soit pixellisée (mauvaise compression jpg ?) et qu'elle soit en double sur la page, puisque tu l'affiches aussi dans la sidebar

J'ai volontairement appliqué une forte compression à l'image de fond, pour gagner en temps de chargement, car elle fait tout de même 1000x1612 pixels. Du coup elle perd en qualité, mais sinon c'était trop lourd. Je sais que normalement on évite de mettre une telle image en fond, mais c'était un souhait du musicien pour lequel je fais le site.

Du coup, j'ai dû composer avec des fonds blancs transparents pour les posts, sinon ce n'était pas lisible.

Et le rappel de l'image dans la sidebar, c'est aussi un souhait du musicien (impossible donc de l'enlever ), car il faut scroller pour voir le pianiste sur le fond principal, donc ça donnait une visibilité à cet élément.

Je ne sais pas si une autre mise en œuvre technique était possible pour répondre à ce genre de souhait, pour l'instant c'est ce que j'ai trouvé, avec quelques compromis.

Merci en tout cas.