[xhtml/css] Hauteur de 2 div

Marsh Posté le 07-09-2004 à 14:36:44

Bonjour,

Je bute sur un problème de div. J'ai une page avec un menu + une zone de contenu. Quand le contenu est long, tout va bien.

Seulement, j'ai un problème quand le contenu est court puisque la zone de contenu ne s'étend pas juqu'au pied de page. Je voudrais arriver à ça (fait avec une table).

J'ai déjà essayé de bidouiller avec un spacer, mais ça ne fonctionne pas comme je veux.

Peut-être qu'il faut que je revoie la conception de la page ? Pour l'instant j'ai à peu près ça (en résumé):

.page{
width:750px;
margin: 5px auto 5px auto;
}

.titre{
width:100%;
height: 70px;
}

.contenu{
margin-right: 150px;
}

.lemenu{
float : left;
width: 150px;
}

.piedPage{
clear: both;
width:100%;
}

Dans le body :

<div class="page">

<div class="titre">
Titre du site
</div>

<div class="lemenu">
Menu <br />
Menu <br />
...
</div>

<div class="contenu">
blablabla
</div>

<div class="piedPage">
Pied de page ( spacer )
</div>

</div>

Faites pas attention aux class à la place des id :whistle:

Message édité par pascal_ le 07-09-2004 à 14:39:54

Reply

Marsh Posté le 07-09-2004 à 14:36:44

Reply

Marsh Posté le 07-09-2004 à 14:44:10

minheight n'étant pas supporté par IE, la table reste pour le moment la meilleure solution.

---------------
Expert en expertises

Reply

Marsh Posté le 07-09-2004 à 15:35:57

Bon, finalement j'ai trouvé qqchose , mais avec du js

#contenu{
background-color: #F2F2F2;
min-height: 300px;
height:expression( /* tjs pour IE */
document.getElementById('contenu').scrollHeight < 300 ?
"300px":
"auto"
);
margin: 0px 0px 0px 150px;
padding : 0px 10px 10px 10px;
}

min-height est interprété par les navigateurs supportant CSS.
height:expression( ... ) est une syntaxe JS de IE uniquement supporté par lui. Si le js est désactivé, c'est pas trop grave puisque non vital (ça fait moche sur certaines pages, mais tant pis)

ce que ça donne

Il y a qqun qui utilise un mac et qui pourrait tester la page avec :whistle: ?

Edit: en fait le problème qui reste, c'est si la taille du menu augmente, je suis obligé de modifier le CSS [:spamafote] .

Message édité par pascal_ le 07-09-2004 à 15:41:52

Reply

Marsh Posté le 07-09-2004 à 15:38:03

Hermes le Messager a écrit :

minheight n'étant pas supporté par IE, la table reste pour le moment la meilleure solution.

A la limite, mais comme IE ne gére pas l'héritage des styles dans les tableaux correctement :fou:

Reply

[xhtml/css] Hauteur de 2 div

Sujets relatifs:

Leave a Replay