CSS/HTML：如何用CSS模拟IFRAME？

我希望在我的网页上始终显示页眉DIV和页脚DIV，无论何时向下滚动页面

如何仅使用CSS（不使用iFrame）来实现这一点

例如：

<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>

始终显示在顶部，无论您是否已向下滚动页面
...
始终显示在底部

如果你可以避免IE 6，那么你可以使用

位置：固定

差不多

<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>

#标题{位置：固定；顶部：0px；}
#主要内容{高度：1200px；}
#页脚{位置：固定；底部：0px；}
始终显示在顶部，无论您是否已向下滚动页面
...
始终显示在底部

---

请参阅

如果可以避免IE 6，则可以使用

位置：固定

差不多

<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>


#标题{位置：固定；顶部：0px；}
#主要内容{高度：1200px；}
#页脚{位置：固定；底部：0px；}
始终显示在顶部，无论您是否已向下滚动页面
...
始终显示在底部

请参见

但是请不要用这个。你的用户会讨厌你并离开网站

#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;
}

但是请不要用这个。你的用户会讨厌你并离开网站。
以及
top:0和底部编码：0以及顶部的
0和底部编码：0用于页脚。
#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;
}