Forcer la hauteur d'une <div> à descendre ?

Bonsoir à tous,

Je suis en train de construire une page html et j'ai un problème avec la hauteur d'un de mes blocs.

La contrainte étant que je ne peux pas modifier mon code html. C'est comme ça

La page en question se trouve ici : http://www.imudo.fr/test/
(je n'ai pas tout uploadé, il manque des images, notamment au survol du menu de gauche)

Il s'agit de mon bloc #main : j'ai absolument besoin de lui affecter une couleur de fond, pour qu'on la voit apparaître jusqu'en bas (jusqu'au #footer), mais ce dernier ne s'adapte pas à la hauteur des blocs qu'il contient. Il reste "invisible" car "non-développé"

J'ai essayé avec des height à 100% pour le html, le body, le #wrap, mais dans ce cas, je me retrouve avec une hauteur extensible, et même un vide incompressible entre mon #wrap et mon #footer.

Bref, auriez-vous une idée pour que mon bloc #main puisse descendre jusqu'en bas (jusqu'au #footer) ?

Je vous remercie d'avance pour votre aide

Bonsoir,

Peut-être en rajoutant un div block englobant toute la zone souhaitée avec un height défini soit en px ou éventuellement en % ?

Bon vent !

Bonjour,

En temps normal, je ne le ferais pas comme ça, mais comme tu as cette contrainte concernant le HTML, tu peux essayer avec un overflow:hidden dans look.css :

#main {
	width:960px;
	height: 100%;
	background-color:#FFCCFF;
	padding:0px;
overflow:hidden;
}

Le résultat semblait correct sous Firefox, mais je n'ai pas testé dans les autres navigateurs. Comme je n'ai pas l'habitude d'utiliser overflow:hidden, je ne sais pas s'il peut y avoir des effets de bord.
Modifié par Tony Monast (13 Dec 2010 - 23:10)

Merci pour ton retour.

Mais malheureusement :
- je ne peux pas modifier le html (il est généré par un espèce de CMS qui gère plusieurs templates, donc ça je n'ai pas le droit !!! c'est une des contraintes)
- je ne peux pas lui attribuer de hauteur fixe, car il y a plusieurs pages, donc plusieurs types de contenu, donc la hauteur est variable

Je crois que nos posts se sont croisés. Je tiens à le préciser pour éviter que tu rates ma réponse.

Tony Monast a écrit :
tu peux essayer avec un overflow:hidden

Effectivement ça fonctionne très bien dans Firefox et Safari ! Merci beaucoup !!!

Moi non plus je n'ai pas l'habitude d'utiliser des overflow.

Qu'entends-tu par "des effets de bord" ?

Par effets de bord, je veux dire que ça pourrait créer des bugs dans certains navigateurs dans des circonstances particulières. Ce n'est pas certain, mais comme je n'utilise jamais cette technique pour gérer les flottants, je préfère te prévenir pour que tu t'informes davantage sur cette technique ou du moins, que tu tests dans plusieurs navigateurs.

Par exemple, sans pouvoir l'affirmer avec certitude, il est possible que si le div n'est pas assez grand, que le contenu qui dépasse disparaisse tout simplement. Mais ça, ça reste à vérifier avec un habitué de cette technique d'overflow:hidden.

Hello,

pour l'explication sur l'utilisation de overflow:hidden voir Float, clear et contextes de formatage.

Il peut effectivement poser problème lorsque, pour une raison ou pour une autre, les éléments contenus ont une largeur trop grande (tu peux par exemple essayer en rajoutant min-width:1000px sur tes paragraphes).

A lire en complément : Gérer les débordements de contenu grâce à CSS.
Modifié par Heyoan (14 Dec 2010 - 06:12)

Salut,

Le plus gros problème que j'ai rencontré de l'utilisation de l'overflow:hidden pour créer un nouveau contexte de formatage est lorsque tu as, par exemple, un contenu dans lequel tu génères des tooltips personnalisés. En effet, l'overflow:hidden sur un élément empêche son contenu d'en sortir, donc si ces tooltips positionnés en absolute ont pas mal de contenu, ils seront rognés s'ils dépassent de la zone de l'élément avec overflow:hidden (ou auto).

Je sais pas si j'ai réussi à être compréhensible.

A priori ce overflow hidden n'a pas l'air de poser de problème sur mes autres pages (hallelujah !).

Par contre, l'avantage que j'avais avec mon html et body à 100%, c'était que ma #sidebar-stream descendait jusqu'en bas. Tandis que là elle s'arrète à son dernier li.

J'ai lu pas mal de truc ces derniers temps sur les hauteurs de css, je sais que c'est un "touchy" et là je m'emmêle les pinceaux.

Auriez-vous une idée de la manière de la descendre, elle aussi jusqu'en bas ? Ou connaissez-vous un article qui traite du sujet ?

Merci encore à tous

Bon, bah finalement je me suis débrouillée avec la technique des colonnes factices ^^

Qu'est ce que c'est bon de trouver des solutions !!... Pfiouuu..