28172 sujets

CSS et mise en forme, CSS3

[Résolu] Deux colonnes de hauteur 100% avec chevauchement…

Bonsoir à tous !

Cela fait 3 jours que je m'arrache les cheveux sur ce petit bout de code pourtant simplissime dans le concept… J'ai lu et essayé toutes les combinaisons possibles, du positionnement au z-index en passant par le min-height et les différents hacks. Bref, j'ai besoin de vos lumières !

Un div (conteneur) centré horizontalement contient deux « colonnes » (en l'occurrence, deux div) qui doivent s'étirer sur 100 % de la hauteur de la fenêtre quelque soit le contenu de l'une ou de l'autre et quelques soit la position de l'ascenseur de scroll. Toute la subtilité réside dans le fait que la colonne bleue (celle de droite) doit chevaucher le bord droit la verte de +/- 10px.

Si je passe par un positionnement absolu, tout fonctionne, mais évidemment, en plus de ne pas être très "browsers-friendly" les marges négatives du bloc conteneur masquent son contenu si la fenêtre du navigateur n'est pas assez large. En positionnement relatif, je n'arrive pas à avoir une hauteur de 100% dans tous les cas de figure. En mélangeant relatif et absolu c'est mieux mais ça bug toujours si le contenu est trop grand…

Schéma de base :
http://h4xr.org/9lqh

Résultat obtenu avec le contenu du div bleu plus grand que celui du div vert :
http://h4xr.org/ykmi

Résultat obtenu avec le contenu du div vert plus grand que celui du div bleu :
http://h4xr.org/bffd

Côté CSS (code de base, avant mes différents essais) : 

[...] après le reset CSS

html,body { width:100%; height:100% }

#conteneur { width:910px; height:100%; margin:0 auto; background:#ccc }
	#vert { width:230px; background:#6f0 }
	#bleu { width:685px; height:100%; position:absolute; top:0px; margin-left:225px; background:#09f }


Côté XHTML :

<div id="conteneur">
	<div id="vert"> Lorem… </div>
	<div id="bleu"> Ipsum… </div>
</div>


Si vous avez une solution, je suis preneur…

Joyeuses fêtes et merci d'avance !
Erwan
Modifié par r-one (27 Dec 2008 - 16:38)
Faut-il rappeler que le positionnement absolu et le positionnement relatif sont l'exception en positionnement CSS, plutôt que la règle? Dans la plupart des cas, on les utilisera peu si on souhaite faire les choses proprement.
pour un cas comme le tien, pourquoi ne pas prendre le fond de tes trois colonnes et en faire une image de 1px de hauteur et de l'appliquer en fond sur body ? étant donné que body prend 100% de la hauteur de la page, l'illusion sera faite!
exavin a écrit :
en faire une image de 1px de hauteur

20 ou 50px de hauteur, c'est mieux. Ça fait des images à peine plus lourdes (voire pas du tout), et ça aide certains navigateurs à répéter l'image facilement car il faudra la répéter cent fois au lieu de cinq mille, par exemple. Sur des ordinateurs peu puissants et avec certains navigateurs, ça a son importance.
Merci à tous pour vos réponses, j'ai finalement, au détriment de l'esthétisme, utilisé la technique des colonnes factices avec un background sur le div conteneur et de bêtes "float" sur les deux colonnes. En simulant le chevauchement, ça fonctionne bien, même si je perds l'ombre portée au dessus de la colonne verte.


[...] après le reset CSS

html,body { width:100%; height:100% }

#conteneur { 
	width:910px; 
	min-height:99%;
	margin:0 auto;
	background:url(../img/ctn_bg.png) repeat-y 225px;
}
	#vert { width:230px; float:left; overflow:hidden }
	#bleu { width:675px; float:right; margin:0 5px 0 0 }
Le min-height:99% est à priori inutile, non? Soit tu souhaites avoir tes colonnes factices sur toute la hauteur du viewport même si le contenu est court, et dans ce cas tu as besoin d'un min-height:100%, pas 99%. Soit tu as utilisé cette déclaration parce que l'image de fond ne s'affichait pas, et dans ce cas il faut travailler la question du dépassement des flottants.
Florent V. a écrit :
Le min-height:99% est à priori inutile, non? [...]

Non, simplement pour éviter une barre de scroll permanente sur la version de développement avec un div de débogage de hauteur 1% en tête de body m'affichant le statut (couleur et/ou texte) de certaines fonctions… Smiley smile La version de production sera bien en min-height 100%.
Sujet clos
Aller à