CSS / HTML: как смоделировать IFRAME с помощью CSS?

Question

Я хочу, чтобы заголовок DIV и нижний колонтитул DIV всегда отображались на моей веб-странице независимо от того, когда вы прокручиваете страницу вниз.

Как мне сделать это, используя только CSS (без IFRAMES)

Например:

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

Answer 1

Если вы можете избежать IE 6, тогда вы можете использовать position: fixed.

Что-то вроде

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

См. Лучшее фиксированное позиционирование для Internet Explorer 6

Answer 2

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

Answer 3

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

Но, пожалуйста, не используйте это. Ваши пользователи будут ненавидеть вас и покидают сайт.