Bonjour,
Sans un hypothétique JS te permettant de connaitre la hauteur de la fenêtre disponible du navigateur, ce me semble bien compromis.
Il y a un solution (moche et peu accéssible) et peu utile si le contenu de ton bloc 3 est trop conséquent ou si la taille de la police est augmentée (sinon tu perds le bouton de scroll)
<style type="text/css">
*{margin: 0; padding: 0;}
body, html{
height: 100%;
}
#conteneur{
height: 100%;
background: lime;
width: 800px;
margin: auto;
position: relative;
}
#tete{
position: absolute;
left: 0;
top: 0px;
height: 300px;
background: yellow;
width: 80%;
}
#pied{
background: red;
width: 80%;
height: 100%;
overflow: auto;
}
#pied_contenant{
width: 95%;
padding-top: 300px;
}
#pied_contenant p{
font-size: 2em;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="tete">
</div>
<div id="pied">
<div id="pied_contenant">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim, tellus accumsan convallis hendrerit, est pede dapibus magna, id pulvinar nunc odio vitae lorem. Pellentesque rutrum, diam nec ornare viverra, arcu sem interdum ante, a volutpat est nisi ac nulla. Proin mauris. Sed euismod, erat vel feugiat blandit, pede metus bibendum ante, eget ornare nisl enim eu metus. Aenean nisl sem, mollis ac, dapibus ac, laoreet ut, lacus. Aenean gravida nibh sit amet ante. Maecenas gravida, tortor a lobortis dignissim, risus leo vehicula orci, a luctus mi lectus et urna. Nulla facilisi. Suspendisse potenti. Pellentesque malesuada felis non justo. Sed in ipsum eu leo auctor gravida. Cras non felis.
</p>
</div>
</div>
</div>
</body>
Mais bon ...
Ah j'oubliais, il y a ce code qui fonctionne bien pour FF, IE7 et Opera mais pas pour IE6
<style type="text/css">
*{margin: 0; padding: 0;}
body, html{
height: 100%;
}
#conteneur{
height: 100%;
background: lime;
width: 800px;
margin: auto;
position: relative;
}
#tete{
height: 300px;
background: yellow;
width: 80%;
}
#pied{
position: absolute;
left: 0;
top: 300px;
bottom: 0;
background: red;
width: 80%;
overflow: auto;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="tete">
</div>
<div id="pied">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim, tellus accumsan convallis hendrerit, est pede dapibus magna, id pulvinar nunc odio vitae lorem. Pellentesque rutrum, diam nec ornare viverra, arcu sem interdum ante, a volutpat est nisi ac nulla. Proin mauris. Sed euismod, erat vel feugiat blandit, pede metus bibendum ante, eget ornare nisl enim eu metus. Aenean nisl sem, mollis ac, dapibus ac, laoreet ut, lacus. Aenean gravida nibh sit amet ante. Maecenas gravida, tortor a lobortis dignissim, risus leo vehicula orci, a luctus mi lectus et urna. Nulla facilisi. Suspendisse potenti. Pellentesque malesuada felis non justo. Sed in ipsum eu leo auctor gravida. Cras non felis.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim, tellus accumsan convallis hendrerit, est pede dapibus magna, id pulvinar nunc odio vitae lorem. Pellentesque rutrum, diam nec ornare viverra, arcu sem interdum ante, a volutpat est nisi ac nulla. Proin mauris. Sed euismod, erat vel feugiat blandit, pede metus bibendum ante, eget ornare nisl enim eu metus. Aenean nisl sem, mollis ac, dapibus ac, laoreet ut, lacus. Aenean gravida nibh sit amet ante. Maecenas gravida, tortor a lobortis dignissim, risus leo vehicula orci, a luctus mi lectus et urna. Nulla facilisi. Suspendisse potenti. Pellentesque malesuada felis non justo. Sed in ipsum eu leo auctor gravida. Cras non felis.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim, tellus accumsan convallis hendrerit, est pede dapibus magna, id pulvinar nunc odio vitae lorem. Pellentesque rutrum, diam nec ornare viverra, arcu sem interdum ante, a volutpat est nisi ac nulla. Proin mauris. Sed euismod, erat vel feugiat blandit, pede metus bibendum ante, eget ornare nisl enim eu metus. Aenean nisl sem, mollis ac, dapibus ac, laoreet ut, lacus. Aenean gravida nibh sit amet ante. Maecenas gravida, tortor a lobortis dignissim, risus leo vehicula orci, a luctus mi lectus et urna. Nulla facilisi. Suspendisse potenti. Pellentesque malesuada felis non justo. Sed in ipsum eu leo auctor gravida. Cras non felis.
</p>
</div>
</div>
</body>
Modifié par ghost (14 Jul 2007 - 00:29)
!