[Résolu] Height variable dans un tableau CSS

Bonjour,

J'ai un petit souci pour adapter le modèle 12 ( http://css.alsacreations.com/modeles/modele12.htm ) de mise en page en CSS proposés sur le site ( http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS )

Il correspond parfaitement à ce que je cherche à faire (header, menu, contenu, footer) à un détail près. J'aimerai que le menu et le contenu (la partie du milieu en clair) s'adapte à la résolution/taille de l'écran. J'entend par là que la hauteur (height) de ces deux parties ne soit pas défini (ici, elle fait 300px). La hauteur du header et du footer par contre, seraient fixes.

En bref, un header d'une hauteur de 100px (par exemple), un footer d'une hauteur de 100px (par exemple) et une hauteur variable du menu et du contenu qui irait du header au footer.

J'ai essayé en mettant 100%, mais ça ne marche pas. Si vous avez une idée...

merci
matthieu
Modifié par matthieu (18 May 2005 - 18:12)

essaie de remplacer le code entre <style> et </style> par ca :

html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-color: #fff; /*couleur de fond blanche*/
}
.conteneur { /*le conteneur global du site, qui sera centré */
width: 100%;
height: 100%;
position: absolute;
background-color: #99CC99;
}

.header {
height: 100px;
background-color: #99CCCC;
}
.menu {
position: absolute;
left:0;
top: 100px;
bottom: 100px;
width: 150px;
background-color:#FF0000;
}
.frame {
position: absolute;
margin-left: 150px;
top: 100px;
bottom: 100px;
background-color:#00FF00;
width: auto;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0;
height: 100px;
background: #0055ff;
width: 100%;
}
p {margin: 0 0 10px 0;}

.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}

(il y a encore un problème le largeur de la frame que je n'ai réussi à résoudre )

@the_penguin

L'objectif de ce forum c'est de permettre à chacun de progresser, alors si tu dois mettre un code complet sur un plateau, mieux vaut donner un minimum d'explications et pas le code direct sans commentaires.

Cà répond bien à ce que j'attends pour Firefox, en revanche, sous IE5, ça n'a rien à voir et le problème est le même. J'crois que j'vais jamais arriver à le faire ce truc tout bidon...

Igor a écrit :

L'objectif de ce forum c'est de permettre à chacun de progresser, alors si tu dois mettre un code complet sur un plateau, mieux vaut donner un minimum d'explications et pas le code direct sans commentaires.

tu as raison, j'ai pas vraiment commenté mon code

en fait, j'ai fait la meme opération pour les DIVs "frame" et "menugauche" : ils sont positionnés "absolute", leur hauteur n'est pas definie et les propriétés
top: 100px;
bottom: 100px;
laissent la place pour le header et le footer.

le footer a aussi été modifié: il est en positionnement absolute et il est collé en bas (bottom: 0;) avec une hauteur de 100px.

pour le pb sous IE ca vient du fait que IE interprète height: 100%; un peu comme FF interprète min-height: 100%; mais je sais pas comment ca peut se résoudre

the_penguin a écrit :


tu as raison, j'ai pas vraiment commenté mon code

en fait, j'ai fait la meme opération pour les DIVs "frame" et "menugauche" : ils sont positionnés "absolute", leur hauteur n'est pas definie et les propriétés
top: 100px;
bottom: 100px;
laissent la place pour le header et le footer.

le footer a aussi été modifié: il est en positionnement absolute et il est collé en bas (bottom: 0;) avec une hauteur de 100px.

J'avais compris, merci quand même