[CSS] hauteur max de div

Marsh Posté le 20-11-2003 à 09:32:16

hello, je me casse la tête depuis 2 bonnes heures pour reussir à faire quelques chose de tout con.

un div "panel" de 150px de large qui est est a gauche (pour la navigation) et un div "main" principal

mon soucis est que si le contenu du div princiapl est plus haut que la hauteur de la page, mon div panel lui reste a la meme hauteur est ne s'agrandit pas.

J'ai essayé un tas de positionnement different mais j'en ai trouvé aucun qui marche.
J'en suis même venu à penser revenir a une table à 2 cellules...

Des solutions?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body{
color: #000000;
font-family: Arial, Geneva;
font-size: 12px;
margin:0px;
height:100%;
}
.panel{
border: 1px solid red;
width: 150px;
height: 100%;
float:left;
}
.main{
height:1000px; /*seulement pour l'exemple*/
border: 1px solid black;
}

</style>
</head>
<body>

<div class="panel">
ce div doit prendre la hauteur maximale
</div>
<div class="main">
La hauteur de ce div est definie par son contenu (pas de hauteur fixe)
</div>

</body>
</html>

Reply

Marsh Posté le 20-11-2003 à 09:32:16

Reply

Marsh Posté le 20-11-2003 à 11:04:53

si la hauteur du div englobant n'est pas exprimé explicitement, ce n'est pas possible. Par contre, rien ne t'empèche de faire un faux fond qui prolonge ton panel.

Reply

Marsh Posté le 20-11-2003 à 18:49:22

DrLobo a écrit :

Des solutions?

Ne pas spécifier de hauteur pour #main

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Reply

Marsh Posté le 26-02-2009 à 18:39:00

c'est pourtant simple

tu mets tes deux div dans un div principal ce qui te donne

<body>
<div id="principal">
<div class="panel">
ce div doit prendre la hauteur maximale
</div>
<div class="main">
La hauteur de ce div est definie par son contenu (pas de hauteur fixe)
</div>
</div>
</body>

ensuite tu appliques une couleur (ici white )ou une image ( par exemple cette image peut-être 105px blanc ( largeur de ton div panel) puis le 106px est black puis 107px gray) au div principale

#principal{
background-image: url(images/barre.jpg);
background-repeat: repeat-y;
background-position-x: left;
[#00ff00]background-color: white; ( à mettre si tu n'utilise pas d'image)
}

la finte est là, maintenant tu ne mets pas de bakground au "panel"

.panel{
...;[background-color: transparent;}

ainsi le panel à la couleur ou l'image de fonds du "principal"

tu peux en plus rajouter un border-left au " main"

.main{border-left: #ff6600 1px solid;}

ou aligner une image à gauche de ton main

.main{background-image: url(images/barre.jpg);
background-repeat: repeat-y;
background-position-x: left;}

tchao

Reply

[CSS] hauteur max de div

Sujets relatifs:

Leave a Replay