18041 sujets

Questions générales et questions de débutants

[Résolu]3 zones avec scroll

Bonjour à tous,

J'essaie de mettre en place le modèle suivant :
Une zone "header" (hauteur fixe)
Une zone "footer" (hauteur fixe)
et une zone "mainContenu" entre les deux. Je souhaite que cette zone "contenu" occupe tout l'espace entre les one "header" et "footer" et qu'elle soit scrollable.
Dans les fait, je n'arrive pas à définir ma zone "mainContenu" pour qu'elle occupe bien tout l'espace entre les deux autres.

Le mieux (et c'est pas bon du tout) ! auquel je suis arrivé a été obtenu avec le code CSS suivant (repris d'un des tutos et modifié.) :


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 {
position: absolute;
height: 100%;
width: 100%;
background-color: green;
}
#header {
position: absolute;
top: 0px;
height: 100px;
width: 100%;
background-color: red;
overflow: auto;
}
#footer {
position: absolute;
bottom: 0px;
height: 100px;
width: 100%;
background-color: red;
overflow: auto;
}
#mainContenu {
position: absolute;
margin-top: 100px;
margin-bottom:100px;
width: 100%;
height: 100%;
background-color: blue;

overflow: scroll;
}


Voici le code de ma page test HTML

<body>
<div id="conteneur">

<div id="header">
<p>voici le header</p>
</div>

<div id="mainContenu">
<p>voici le main contenu</p>
<p>voici le main contenu</p>
<p>voici le main contenu</p>
<p>voici le main contenu</p>
<p>voici le main contenu</p>
<p>voici le main contenu</p>
<p>voici le main contenu</p>
<p>voici le main contenu</p>
</div>

<div id="footer">
<p>voici le footer</p>
</div>

</div>
	
</body>


D'avance merci pour une piste.
Modifié par silou (04 Jan 2008 - 17:21)
Bonjour et bienvenue! Smiley cligne

Voici une solution basée sur du positionnement absolu:

[b][#black]HTML[/#][/b]

<div id="header">Haut de page</div>
<div id="contenu">Contenu principal</div>
<div id="footer">Pied de page</div>


[b][#black]CSS[/#][/b]

#contenu {overflow:auto; top:100px; bottom:100px;}
#contenu,#footer {position:absolute; width:100%;}
#header,#footer {height:100px;}
#footer {bottom:0;}
Sujet clos
Aller à