probleme de hauteur en pourcentage

burinho · 5 Juillet 2006

Bonjour,

je me remets de nouveau developpement web, j'ai toujours travailler sur du html 4, là je me lance sur xhtml car j'ai vu que la différence de codage ne change pas beaucoup.

voilà je comprend pas pourquoi quand je met dans ma div gauche hheight:100%; ça fonctionne pas pourtant quand je met une taille en px, ou en em c'est bon.

quelqu'un pourrais m'éclairer

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
	   <title>accueil</title>
	   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="premio" href="handicapzero.css" />

   </head>

   <body>
		<div id="gauche">

		</div>

	</body>




</html>

body {
height:100%; 

}

#gauche{

width:20%;
height:100%; 
background-color:#fcff1c;
}

ghost · 5 Juillet 2006

Salut,

Je dis peut être une bétise mais pour un % il faut peut être qu'il y ait quelque chose de quantifié à l'intérieur 100% de 0 ça fait 0?

**Portekoi** · 5 Juillet 2006

Ajoute dans ton div :

 <div id="gauche">
 
 </div>

burinho · 5 Juillet 2006

Sur le post j'ai rien mis mais chez moi j'ai bien mis quelques chose et ça change rien.

Ajoute dans ton div

j'ai pas bien compris ce que tu me demande d'ajouter dans mon div

ghost · 5 Juillet 2006

Et si tu places ton div gauche en position relative?

Remi · 6 Juillet 2006

Pour utiliser des pourcentages, il faut que le contenant ait une longueur définie.

Là ce n'est pas le cas.

En plus, les hauteurs de div... hum... ça ne marche pas toujours très bien.

burinho · 6 Juillet 2006

Et si tu places ton div gauche en position relative?

ça change rien

Pour utiliser des pourcentages, il faut que le contenant ait une longueur définie.
Là ce n'est pas le cas.

En plus, les hauteurs de div... hum... ça ne marche pas toujours très bien.

Le contenant c'est pas le body qui possede height:100%.

Modifié 6 Juillet 2006 par burinho

xou · 6 Juillet 2006

Bonjour,

les hauteurs relatives ce n'est jamais bon...

enfin, si tu persistes quand même voilà un article qui pourra t'aider:

http://blog.alsacreations.com/2004/05/13/3-height

burinho · 7 Juillet 2006

en effet ça marche ce truc, je ne comprend pas bien pourquoi il utilise égallement in style à la balise HTML

html, body{

}

burinho · 7 Juillet 2006

je viens d'effectué le test effectivement on arrive bien a avoir une div à gauche sur toute la page.

par contre si on inserre un div page a coté et que celle ci , la page de droite s'agrandit avec le contenu mais celle de gauche deveint très vite plus grande que celle de gauche et on revient au même probleme.

paul22 · 7 Juillet 2006

Bonjour !

% en hauteur :


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <!-- Date de création: 06/06/2004 -->

  <head>
	<title>hauteur en %</title>
	<meta name="Author" content="lg.motoculture" />
	<meta name="identifier-url" content="http://www.motoculture-jardin.com" />
	<meta name="Generator" content="WebExpert 2000" />
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">

html, body {
width : 100%; 
height : 100%; 
} 
body {
margin : 0; 
padding : 0; 
font-family : Verdana, Arial, Helvetica, sans-serif; 
color : #000000;
font-size : 0.8em; 
background-color : #d3d3d3; 
} 
.conteneur {
width : 100%; 
height : 100%; 
position : absolute; 
background-color : #lightgrey; 
} 
.header {
height : 6%;  
background-color : #00FF33; 
} 
.header1 {
height : 20%;  
background-color : #00CC66; 
} 
.header2 {
height: 4%;
background-color : white; 
} 
.menu {
position : absolute; 
left : 0;  
width : 160px; 
height : 67%; 
overflow : auto; 
background-color : #FF33CC;
} 
.frame {
margin-left : 161px;  
width : auto; 
height : 67%; 
background-color : #FF9933; 
overflow : auto; 
} 
.footer {
height : auto;  
background-color : black; 
} 
	</style> 
  </head>
  <body>

	<div class="conteneur">
	  <div class="header">
	   COU COU
	  </div>
	  <div class="header1">
	   	 n'importe quoi
	  </div>
	  <div class="header2">
		   n'importe quoi
	  </div>
	  <div class="menu">

			 n'importe quoi
	  </div>
	  <div class="frame">

			  n'importe quoi


	  </div>
	  <div class="footer">
	   		   nimporte quoi
	  </div>
	</div>
  </body>
</html>
Paul

burinho · 8 Juillet 2006

quand on met hauteur:100%; cela n'affiche que 100% de l'ecran donc si cela dépasse l'ecran ça marche plus.

mais j'ai trouvé une astuce sur ce site et ça marche ici

wonderclochette · 10 Juillet 2006

Salut,

En fait il n'y a pas besoin d'astuce (au fait ton lien ne marche pas).

Il suffit de faire :

<style type="text/css">
div {
min-height:100%;
}
</style>

Et comme min-height n'est pas reconnu par IE mais que ce dernier interprète height comme si c'était un min-height :

<!--[if IE]>
<style type="text/css">
div {
height:100%;
}
</style>
<![endif]-->

Modifié 10 Juillet 2006 par wonderclochette

burinho · 10 Juillet 2006

Et comme min-height n'est pas reconnu par IE mais que ce dernier interprète height comme si c'était un min-height :

<!--[if IE]>
<style type="text/css">
div {
height:100%;
}
</style>
<![endif]-->

tu es sur de ton coup, et si le div de gauche augmente le div de droite augmente aussi

désolé pour le lien, je le poste à nouveau ici

Modifié 10 Juillet 2006 par burinho

Connexion

probleme de hauteur en pourcentage

Sujets conseillés

burinho

ghost

Portekoi

burinho

ghost

Remi

burinho

xou

burinho

burinho

paul22

burinho

wonderclochette

burinho

Veuillez vous connecter pour commenter

Parcourir

Activité