Aller au contenu

probleme de hauteur en pourcentage


burinho

Sujets conseillés

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;
}

Lien vers le commentaire
Partager sur d’autres sites

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?

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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é par burinho
Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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é par wonderclochette
Lien vers le commentaire
Partager sur d’autres sites

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é par burinho
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...