28173 sujets

CSS et mise en forme, CSS3

[Résolu ~] Height:100% et double colonne = problème...

Bonjour,

problème fréquent (à la vue du nombre de problèmes au sujet du height:100%)... mais comme je n'ai rien trouvé ni sur le forum ni avec les modèles de cette page : http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS
je me permet de poser mon problème ici... Smiley langue

J'essaye d'avoir un design 2 colonnes (menu à gauche et contenu à droite).
La difficulté que je rencontre se trouve au niveau du height:100% pour le menu. J'aimerais lui appliqué une image background répétée en y donc il faut absolument que le div du menu descende au plus bas du contenu / de la page

Voici ma page test : http://perso.orange.fr/tchupacabra/ressources_web/alsacreations/test-height-100pp.html

et le code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Test</title>
<style>
* {
	padding: 0;
	margin: 0;
}
html, body {
	height: 100%;
	width: 100%;
	max-width: 1000px;
	min-width: 700px;
}
body {
	font-family: Arial, Tahoma, Geneva, Helvetica, sans-serif;
}
#left-sidebar {
	position:absolute;
	left: 20px;
	top: 0px;
	width: 200px;
	height: 100%;
	background-color: #0055A4;	
}
div#contenu {
	margin-left: 240px;
	background: #CCCCCC;
}
</style>

</head>
<body>
	
<div id="left-sidebar">le menu</div>

<div id="contenu">
	contenu<br />
	contenu<br />
	contenu<br />
[ ... ]
	contenu<br />
	contenu<br />
	contenu<br />
</div>

</body>
</html>


Avec ce code, malgré le height:100% au div#left-sidebar, la hauteur ne prend pas le maximum...
Comment faire alors ?

Merci d'avance
Smiley smile
Modifié par Tchupacabra (15 May 2007 - 12:17)
Tchupacabra a écrit :
Avec ce code, malgré le height:100% au div#left-sidebar, la hauteur ne prend pas le maximum...

À vrai dire si, la hauteur prend le maximum de ce que tu lui a demandé de prendre. Smiley cligne

Pour que une hauteur en pourcentage soit applicable, il faut que le parent du bloc dont on fixe la hauteur ait lui-même une hauteur déterminée. Dans ton cas, tu es obligé de remonter jusqu'à html, et de lui donner une hauteur de 100%... soit 100% de la hauteur de la fenêtre (ou pour être plus précis de la zone d'affichage ou viewport).

De height: 100% en height: 100%, tu te retrouves donc avec une colonne de gauche ayant pour hauteur la hauteur de la fenêtre, et pas celle de la page. Il n'existe hélas pas de moyen de fixer une hauteur à « 100% de la page ».

Tchupacabra a écrit :
Comment faire alors ?

Travailler la question des colonnes factices :
http://pompage.net/pompe/colonnesfactices/
Encore une fois, merci Florent V.

c'est bien se que je craignais... Smiley ohwell mais bon grâce à toi, et le lien sur Pompage, ça m'a donné une idée ! Smiley lol
Comme, je n'utilisais pas de background en body, je lui ai appliqué l'image répétée... ça marche nickel... Smiley cligne

Question subsidiaire... est-il possible de mettre une marge à un background ?
genre :
background:url(/images/body-sidebar-bg.gif) repeat-y left 20px;


@+
Modifié par Tchupacabra (15 May 2007 - 11:08)
Sujet clos
Aller à