CSS / HTML: Comment simuler IFRAME avec CSS? - html, css

Je veux avoir un en-tête DIV et un pied de page DIV toujours s'affiche sur ma page Web, quel que soit le moment où vous faites défiler la page.

Comment puis-je accomplir cela en utilisant uniquement CSS (sans IFRAMES)

Par exemple:

<div id=header>Always display on top, regardless if you have scrolled down the page</div>
<div id=main_content>...</div>
<div id=footer>Always display on the bottom</div>

Réponses:

Si vous pouvez éviter IE 6, vous pouvez utiliser position: fixed.

Quelque chose comme

<style type="text/css">
#header { position: fixed; top: 0px; }
#main_content { height: 1200px; }
#footer { position: fixed; bottom: 0px; }
</style>
<div id=header>
Always display on top, regardless if you have scrolled down the page
</div>
<div id=main_content>...</div>
<div id=footer>
Always display on the bottom
</div>

Voir Un meilleur positionnement fixe pour Internet Explorer 6

#header { position: fixed; }
#footer { position: fixed; }

Mais veuillez ne pas utiliser ceci. Vos utilisateurs vous haïront et quitteront le site.

#header{
left:0;
top:0;
height:100px;
width:100%;
position:fixed;
z-index:2;
background:grey;
}
#main_content{
margin-top:100px;
margin-bottom:100px;
height:1000px;
}
#footer{
bottom:0;
left:0;
height:100px;
width:100%;
position:fixed;
z-index:2;
background:grey;
}