内容可滚动时具有固定位置的页眉和页脚？

Question

我正在尝试创建一个网站,其中页眉和页脚具有固定的位置,而内容在中间滚动.

<header style="position:fixed"></header>
<div id="content">some content</div>
<footer style="position:fixed"></footer>

我创造了我认为可行的东西,但事实并非如此.这是jsFiddle与整个事情.正如您所看到的,部分内容隐藏在页脚下方(我最终看不到'HELLOWEEN').我必须改变什么来解决它？感谢名单

Answer 1

最简单的解决方法是添加相当于静态页眉和页脚高度的填充:

#content {
    width: 80%;
    margin: 0 auto;
    padding: 60px 0;
}

的jsfiddle

Answer 2

http://jsfiddle.net/yASFU/

<header>header</header>
<section>
    <div class="push">push</div>
</section>
<footer>footer</footer>

html, body {height:100%; margin:0; overflow:hidden;}
header, footer {display:block; background-color:black; height:10%;}
section {height:80%; background-color:lightblue; display:block; overflow:auto;}
section .push {height:4000px;}