[Résolu] Div hauteur 100%

Bonjour,
je suis sur la création d'un site mais j'ai un problème avec la hauteur d'une div.
J'aimerais que la div de droite (Nos réalisations) fasse 100% de la hauteur.
Mais j'ai deux pb :

En l'état la div de droite (right-area) fait bien 100% de haut, mais la div de gauche "left-area" est tronqué. L'article "Article num 1" est mangé par le bloc newsletter.

Si je supprime height:100% de la div "container" alors, l'article n'est plus tronqué, mais la div de droite ne fait plus 100% de haut.

Bref, je ne sais comment m'en sortir.

Merci de votre aide
Modifié par christobal (11 Feb 2013 - 10:13)

Salut, alors en fait ton problème est surtout d'avoir la partie droite avec le fond. Il te faut utiliser la technique du "faux-colonne" pour y arriver. A savoir que tu vas faire un fond blanc+vert pour ton "container" et donc il prendra forcément la même hauteur pour la partie droite et pour la partie gauche... Cherche sur ce forum à "faux colonne"

Sinon tu dois pouvoir t'amuser avec display:table-row pour le conteneur et display:table-cell pour les 2 colonnes.

Tchô

Ça ne me plait pas comme bidouille.
Je suis certain qu'il ne manque pas grand chose pour obtenir ce que je souhaite, mais je sèche.

C'est de la bidouille qui a fait ces preuves

A moins de définir en dur la hauteur de ton conteneur, tu n'auras jamais la même hauteur pour tes deux colonnes flottantes. Le height:100% est relatif au parent, mais ton parent n'a pas de hauteur ou alors a pour hauteur la hauteur de ses enfants (et la le serpent se mord la queue).

La seule solution (éprouvée encore une fois...) est le faux-colonne ou alors le display:table-row et table-cell.

Je viens de faire une découverte.
Mon manière de faire semble fonctionner, c'est la fenêtre de firebug qui remonte et superpose les div.
Donc la question maintenant et de savoir pourquoi elles se superpose.
j'ai tester en rajoutant des display:bloc; clear:both; mais rien de concluant.
Haaa les mystères du css

Bonjour,

J'avais posté une question concernant un footer à coller en bas de page.

IL y a des liens et notamment les réponses de gc-nomade.

Ça correspondrait à votre problème.