28173 sujets

CSS et mise en forme, CSS3

Div allant jusqu'en bas de la page

Bonjour,

voilà quelques temps que je suis confronté à un probleme : j'aimmerais que mon menu (div décalé du haut de la page de 150px) descende automatiquement jusqu'en bas de la page. SI le contenu dépasse cette taille, alors mon menu passe en scroll

J'ai eu beau essayer de nombreuses techniques, je n'y suis pas arrivé Smiley decu
Pouvez-vous me dire qu'elle technique est souhaitable dans ce cas là?
Merci à vous
Kevin

PS: si mon explication n'est pas clair je peux faire un schéma Smiley cligne
Je suis moi-même en train de développer une nouvelle mouture de mon blog qui emploie une colonne d'une hauteur de 100%: http://www.cbsch.net/blog (merci de ne pas trop prêter garde aux bugs et à l'esthétisme encore douteux, mon site est en plein chantier).

De fait, le menu ne fait pas 100% de la hauteur, mais une petite astuce permet de le contourner (même avec une mise en page en unités relatives, comme l'est une partie de mon blog). Ceux que tout cela intéresse peuvent me demander des compléments d'information par email ou par MP.
Re bonjour tout le monde!
Désolé du retard mais aujourd'hui les interros ne manquaient pas à l'appel Smiley cligne

Alors voilà un schéma de la situation souhaitée
http://img257.imageshack.us/img257/3224/sanstitre1pe5.th.jpg

Donc en fait, je veux que mon bloc rouge aille jusqu'en bas de la page, mais ne la dépasse pas, quelque soit la longueur de son contenu.

Je suis assez compréhensible Smiley sweatdrop ?

En tout cas merci pour votre aide Smiley smile

Cordialement
Kevin
Salut,

Sous FF opera et IE7 pas trop de problèmes (sauf que l'on ne connait pas le comportement que doit avoir ton bloc droite), il suffit d'utiliser conjointement min-height et max-height. Pour ie6 c'est une autre histoire, il faut émuler ces propriétés (voir la faq je crois)
<style>
*{margin: 0; padding: 0;}

body, html{
height: 100%;
}

#rouge{
min-height: 100%;
max-height: 100%;
width: 10%;
background: red;
float: left;
overflow: auto;
}	

#droite{
width: 20%;
background: yellow;
float: left;

}
</style>
<body>

	<div id="rouge">
Lorem ipsum dolor sit amet, enim cras magna erat mauris. Vel in lectus lectus at vestibulum, integer eu orci nulla porta. Litora rutrum elit, purus aut elit. Est sed orci duis curabitur per luctus, aenean laoreet, pellentesque maecenas bibendum vel, hendrerit id tincidunt nec in. A sed ornare in, lectus a nascetur ut ut ornare condimentum, sapien magna est vehicula quisque, odio morbi velit a, nunc mauris interdum ridiculus suspendisse consequat. Inceptos maecenas, vestibulum nulla, semper ipsum, nunc congue vel enim sociis, hendrerit fugit nibh consequat vivamus. Nunc nulla pellentesque, sed arcu pellentesque adipiscing suspendisse, tempor suscipit, aliquam ut ut magna congue, neque pede velit placerat ante blandit. Luctus tempus ante in. Volutpat et sapien ut non, sit amet. Morbi dis.
	</div>
	<div id="droite">
Lorem ipsum dolor sit amet, enim cras magna erat mauris. Vel in lectus lectus at vestibulum, integer eu orci nulla porta. Litora rutrum elit, purus aut elit. Est sed orci duis curabitur per luctus, aenean laoreet, pellentesque maecenas bibendum vel, hendrerit id tincidunt nec in. A sed ornare in, lectus a nascetur ut ut ornare condimentum, sapien magna est vehicula quisque, odio morbi velit a, Morbi dis.
	</div>
</body>


Bon courage
Salut et merci pour ta reponse

J'ai bien essayé ta solution (qui marche telle que tu me l'as donné) mais si je rajoute un header comme dans mon schéma, le bloc rouge dépasse de l'écran et donc la page entiere devient scrollable Smiley cligne

Alors que moi en fait, je souhaiterais que ce menu parte du bas du header pour arriver au pied de page.

Tu me comprends ou je ne suis pas assez clair?

En tout cas merci pour ta reponse
Cordialement
Kevin
Salut,

Arf, il faudra que j'ouvre les yeux ...
Effectivement avec un header, ça ne le fait pas (ou alors de manière très inesthétique et peu fonctionnelle), à moins bien sur de caler le header en % ou de tricher en donnant à ton bloc rouge une hauteur min et max en px.
Il reste la solution en JS ... qui devrait passer dans la majorité des cas.
Finality33 a écrit :
Alors que moi en fait, je souhaiterais que ce menu parte du bas du header pour arriver au pied de page.

Ce genre de chose se fait soit avec des effets de trompe-l'oeil (c'est à dire qu'en réalité le bloc n'ira pas jusqu'en bas, mais qu'on en donne l'impression graphique... faire une recherche sur les «colonnes factices» pour en savoir plus), soit avec le positionnement absolu et l'indication des propriétés top ET bottom.

Exemple pour le positionnement absolu: 
/* Si l'en-tête fait 100px de haut */
position: absolute;
top: 100px;
bottom: 0;
Problème: ça ne marchera pas avec IE6 (mais bien avec IE7). Il faudra donc envisager un rendu non optimal dans IE6, ou bien se rabattre sur une technique de trompe-l'oeil.

Mais il y a quelque chose que je ne saisis pas bien: pourquoi figer ce bloc en hauteur et utiliser une barre de défilement interne?
Si le but est de garder le menu toujours présent à l'écran, ce n'est alors pas vers le positionnement absolu qu'il faut se tourner, mais vers le positionnement fixe (position: fixed).
Pour la compatibilité avec le positionnement fixe, même problème: pas compatible IE6. Donc soit on accepte une dégradation (bloc pas fixe) dans ce navigateur, soit... ben pas vraiment d'alternative fiable, là (hormis quelques bidouilles prises de tête et peu robustes que je ne recommande donc pas).
Re tout le monde!

ghost quand tu parles de Javascript tu as une certaine idée en tête?

Florent V, j'ai testé le position:fixed et ça beug sous IE7. C'est normal? Sinon les colonnes factices ne vont pas régler mon probleme : si le contenu devient trop long, le bloc va s'allonger, rendant alors toute la page scrollable Smiley decu

Merci à vous tous
kevin
euh, peut-être que je dis une bêtise (vu que me galère déjà un peu avec cette propiété) mais la propriété overflow:auto sur ton bloc rouge ne permettrait-elle pas d'implémenter un scroll conditionnel ?
miio a écrit :
euh, peut-être que je dis une bêtise (vu que me galère déjà un peu avec cette propiété) mais la propriété overflow:auto sur ton bloc rouge ne permettrait-elle pas d'implémenter un scroll conditionnel ?

Du moment où on a indiqué une hauteur (height) et qu'elle est bien pris en compte, si.
Mais ça ne règle pas le problème du dimensionnement à «toute la hauteur de la page moins celle de l'en-tête», qui n'a à ma connaissance pas d'autre vraie solution que celles que j'indique plus haut.

Sinon, Finality33, tu n'as toujours pas détaillé le comportement que tu souhaiterais: si j'ai un contenu plus haut que la page dans le bloc de droite, qu'advient-il de ce bloc de gauche si difficile à dimensionner?
- il s'allonge également (colonnes factices)?
- il garde sa taille et défile avec le reste de la page (position: absolute; top: 100px; bottom: 0;)?
- il garde sa taille et reste toujours à la même place à l'écran malgré le défilement du reste de la page (position: fixed; top: 100px; bottom: 0;).

Sinon, positionnement absolu et fixe avec à la fois top et bottom devraient marcher correctement dans IE7. Il faudra peut-être aussi indiquer un left: 0 par exemple, pour obtenir un positionnement horizontal correct.
Bonjour tout le monde,

désolé du retard mais la fin de la semaine a été rude au nivea des cours Smiley langue (je savais même plus si c'était pas le bac que je passais lol)

En fait, je voudrais que le bloc de droite se comporte de la même manière que le menu. Tout mon site devra etre bloqué en hauteur en remplissant toute la page.

Je vais essayer de tester tes différentes méthodes

Mais sinon tu penses que c'est possible ou pas? Car ça fait quelques temps que je cherche une solution que je n'ai jamais trouvé Smiley confus

Merci à vous tous
Cordialement
Kevin
Finality33 a écrit :
Tout mon site devra etre bloqué en hauteur en remplissant toute la page.

Argh. Erreur de débutant, on va dire.
Sérieusement, les designs de ce type, qui mettent à mal l'extensibilité en hauteur, sont souvent des désastres ergonomiques. Dit en des termes plus profanes: c'est chiant à utiliser ou à consulter.

Finality33 a écrit :
Mais sinon tu penses que c'est possible ou pas?

Avec le positionnement absolu (ou à la rigeur le positionnement fixe, mais si on fige tout en absolu le positionnement fixe est inutile), c'est tout à fait possible. Le problème est qu'il s'agit d'une gestion assez avancée du positionnement CSS, et que Internet Explorer ne la supporte pas avant sa version 7 (pour rappel, IE6 représente entre 40 et 55% des visiteurs, et ça ne descend pas à une vitesse folle).

Pour la technique, le principe pour un en-tête + deux colonnes figés en hauteur est le suivant:
[b]HTML:[/b]
<body>
	<div id="entete">...</div>
	<div id="gauche">...</div>
	<div id="droite">...</div>
</body>

[b]CSS:[/b]
body {margin: 0; padding: 0; height: 100%;}
div#entete {
	height: 150px;
	background: green;
}
div#gauche {
	position: absolute;
	top: 150px; bottom: 0;
	left: 0;
	width: 300px;
	background: red;
}
div#droite {
	position: absolute;
	top: 150px; bottom: 0;
	left: 300px; right: 0;
	background: blue;
}

Si on veut que le contenu qui dépasserait la hauteur de certains blocs fasse apparaitre une barre de défilement, il faudra alors utiliser overflow: auto.

À noter que si on n'utilise que des dimensions en pourcentages, on peut obtenir une compatibilité IE6 (du moins plus ou moins) avec le CSS suivant:
div#entete {
	height: 20%;
	background: green;
}
div#gauche {
	position: absolute;
	top: 20%; height: 80%;
	left: 0; width: 30%;
	background: red;
}
div#droite {
	position: absolute;
	top: 20%; height: 80%;
	left: 30%; width: 70%;
	background: blue;
}
Sujet clos
Aller à