Div et hauteur 100%

Question

yobogs

17 Nov 2006 à 11:06

Bonjour,

Je sais que cette question a ete posee plusieurs fois sur pas mal de forum et j'ai parcouru pas mal de tutoriaux, mais je n'arrive pas a trouver de solution.

Je souhaite faire une mise en forme comme dans l'image suivante :

J'ai le css suivant :


html, body {height: 100%;width: 100%;margin: 0;padding: 0;border: none}
#global{margin: auto;height: 100%;width: 938px;background-color:#DBE1E4;border-left-width:1px;border-left-style:solid;border-left-color:#666666;border-right-width:1px;border-right-style:solid;border-right-color:#666666;padding-right:11px;padding-left:11px;}

#pub{height: 90px;width: 900px;background-image: url(images/index_09.gif);background-repeat:repeat-x;background-color:#FFFFFF;text-align:center;padding-top:15px;float: left ;background-position:bottom;margin-bottom:6px;}

#menu{
float: left ;background-color:#FFFFFF;width: 219px;margin: auto;margin-bottom:5px;
}
#menudroithaut, #menugauchehaut, #menudroitbas, #menugauchebas {height: 2px; width: 2px;background-repeat: no-repeat;font-size:1px; /* correction d'un bug IE */}
#menudroithaut{background-image: url(images/index_24.gif);float: right;}
#menugauchehaut{background-image: url(images/index_22.gif);float:left;}
#menudroitbas{background-image: url(images/index_59.gif);float:right;background-position:bottom;}
#menugauchebas{background-image: url(images/index_58.gif);float:left;background-position:bottom;}

Je precise je debute donc il y a surement pas mal de truc mauvais ... Smiley cligne

voici ma page :

<div id="global">
	<!-- header -->
	<div id="pub">
	<img src="images/test.gif" />
	</div>
	<!-- Fin header -->
	
	<!-- Menu -->
	<div id="menu">
	<div id="menugauchehaut"></div><div id="menudroithaut"></div>
	texte
	<div id="menugauchebas"></div><div id="menudroitbas"></div>	
	</div>
	<!-- Fin Menu -->
	

</div>

Je n'arrive desesperement pas a faire en sorte que mon menu prenne toute la hauteur du restant de la page Smiley confus

.

Est-ce que;qu'un aurait une idee sur la marche a suivre.

D'avance Merci
Modifié par yobogs (17 Nov 2006 - 11:07)

Neovov

17 Nov 2006 à 11:20

En fait il faut feinter (enfin, c'est comme ça que je fais).
Je fais une boite, que j'appel "container" par exemple, et dedans je mets le menu et le contenu de la page.
Comme ça la boite s'ajuste si le contenu est plus grand que le menu et vice et versa.
Ensuite si tu veux que ton menu ai une couleur différente.. et bien met une image en background au "container" Smiley cligne

(bon c'est sur que c'est pas évident si tu modifie la largeur de ton menu tu dois refaire l'image.. Mais c'est une solution rapide et qui te permet de garder pas mal de tes cheveux)
Modifié par Neovov (17 Nov 2006 - 11:21)

yobogs

17 Nov 2006 à 11:44

Merci pour ta reponse, mais j'ai l'impression que ca ne repond pas trop vu que j'utilise le div global qui correspond a ton "container"... et le pb est toujours le meme

Merci qd meme Smiley cligne

fvsch

17 Nov 2006 à 12:44

yobogs a écrit :
Merci pour ta reponse, mais j'ai l'impression que ca ne repond pas trop vu que j'utilise le div global qui correspond a ton "container"... et le pb est toujours le meme

Tu as testé la méthode indiquée par Neovov et ça ne fonctionne pas ?

Pour info, il s'agit d'une méthode dite des « colonnes factices ».
http://pompage.net/pompe/colonnesfactices/
Suivant les caractéristiques de ton design, elle sera plus ou moins facile à mettre en place.

Si le menu de gauche ne fait pas s'étirer son conteneur (mettre une bordure au conteneur pour visualiser ses limites), c'est qu'il y a un problème de dépassement des flottants (en l'occurence du menu) :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Voilà, c'est un peu vague et généraliste, mais après ça dépend du détail de ta mise en page.

Autre chose : si tu veux que le menu s'étende jusqu'en bas de la page même quand les contenus du menu ET de la zone de contenu sont faibles, alors ça risque d'être un poil plus compliqué à gérer...

mary

5 Dec 2006 à 16:53

Bonjour,

Je lis attentivement votre coversation et une question me vient à l'esprit... les calonnes factices ça ne fonctionne que pour un site qui ne varie pas suivant la résolution de l'écran...En général j'adapte mes site avec des longueur en % comment puis-je régler ce problème de hauteur de colone ?Si jemets une image de fond lors d'un changement de résolution ça ne fonctionnera plus ...

Smiley decu

beuh...

ghost

5 Dec 2006 à 18:32

bonjour,

Si tu as prévu une image de fond succeptible de s'agrandir lors du changement de résolution, ca ne pose pas de problème en laissant bien entendu le fond du menu à gauche transparent...

guilhem_mdg

6 Dec 2006 à 17:12

Bonjour je te conseille le code suivant (bcp travaillé dessus alors de me citer en référence Smiley cligne

)

<!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" lang="fr">
<head>
<style type="text/css">
body{
	margin:0;
	padding:0;
}
#conteneur{
	width:800px;
	margin:0 auto 0 auto;
}
#header{
	background-color:#E1EAF1;
	height:80px;
}
#banniere{
	background-color:red;
	height:30px;
}
#centre{
	position:relative;
}
#centre #menu{
	background-color:green;
	position:absolute;
	top:0;
	left:0;
	width:150px;
	height:expression(document.documentElement.clientHeight - 140);
	overflow:auto;
}
#centre #page{
	background-color:yellow;
	position:absolute;
	top:0;
	left:150px;
	height:expression(document.documentElement.clientHeight - 140);
	width:650px;
	overflow:auto;
}
#footer{
	background-color:orange;
	position:absolute;
	bottom:0;
	width:800px;
	height:30px;
}
</style>

<!--[if !IE]> <-->
<style type="text/css">
#centre{
	position:absolute;
	top:110px;
	bottom:0;
}
#centre #menu{
	position:absolute;
	top:0;
	bottom:30px;
}
#centre #page{
	position:absolute;
	top:0;
	bottom:30px;
}
</style>
<!--> <![endif]-->

</style>
</head>

<body><div id="conteneur">

<div id="header">header</div>

<div id="banniere">Bannière</div>

<div id="centre">
	<div id="menu">menu</div>

	<div id="page">
		partie avec du contenu occupant le reste de la largeur<br />

		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />

		partie avec du contenu occupant le reste de la largeur<br />

		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
				partie avec du contenu occupant le reste de la largeur<br />

		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />


		lll
	</div>
</div>

<div id="footer">pied de page</div>

</div></body>
</html>

Et voilà !! Smiley biggrin

cocokwc

20 Dec 2006 à 12:03

ça ne fonctionne que sous IE. le problème reste entier pour firefox.
si quelqu'un a d'autre idées, je suis preneur.
c'est à cause de expression() qui n'est interprété que sous IE.
Modifié par cocokwc (20 Dec 2006 - 12:04)

ghost

21 Dec 2006 à 03:13

Bonjour,

Je ne sais si c'est ce que tu cherches à faire ...


<style type="text/css">

/*------------------------------------------------------
G L O B A L  E L E M E N T S
------------------------------------------------------*/

* {
	margin: 0;
	padding: 0;
}

html, body{
height: 100%; /* Pour que la page fasse toujours 100% de la fenêtre du navigateur */
}



/*------------------------------------------------------
C O N T A I N E R
------------------------------------------------------*/

#container {
	position: relative;	/* Pour que contenair serve de référence au positionnement absolute su footer */
	margin: auto;
	width: 850px;
	background: yellow;
	height: 100%; /* Pour IE qui ne connait pas min-height */
la fin du contenair */
}

html>body #container { /* Pour les autres navigateurs qui intégrent min-height */
	min-height: 100%;
} 

#pageHeader {
	width: 98%;
    height: 20%;
	background: red;
	margin: auto;
	border: 1px solid #fff;
}


/*------------------------------------------------------
L E F T   C O L U M N 
------------------------------------------------------*/
#left_colon{  /* Placement de la colonne gauche  */
float: left;
width: 150px;
margin-left: 1%;
height: 75%;
border: 1px solid #fff;
background: orange;

}

/*------------------------------------------------------
menus
------------------------------------------------------*/


/*------------------------------------------------------
S U P P O R T I N G   T E X T 
------------------------------------------------------*/


/*------------------------------------------------------
F O O T E R 
------------------------------------------------------*/

#footer {
	position: absolute;	/* Pour positionner le footer au bas de la page */
	bottom: 0;
	height: 5%;
	width:98%;
	background: green;
	text-align:center;
	left: 50%;/* Centrage du footer */
	margin-left: -49%;/* Centrage du footer */ 
}
#footer a{
	color: #FFFFFF;
}



</style>

</head>



<body>

<div id="container">
	<div id="pageHeader">Header
	</div>
			
	<div id="left_colon">
	 menu

	</div>
					

		<div id="WelcomeText">
			texte
		</div>

		
		<div id="footer">
			footer
		</div>
	</div>




</body>

Julien Royer

21 Dec 2006 à 08:52

Salut,

guilhem_mdg a écrit :
Bonjour je te conseille le code suivant (bcp travaillé dessus alors de me citer en référence )

Soit dit en passant, avant de proposer du code pour lequel on veut "se faire citer en référence", il faudrait peut-être le valider.

Sujet clos

CSS et mise en forme, CSS3

Div et hauteur 100%