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

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

Answer 3

1. 删除页眉和页脚上的位置样式
2. 在内容上设置高度
3. 将样式overflow-y：auto添加到内容

如果您希望内容高度与浏览器窗口匹配（减少页眉和页脚），请使用javascript进行设置（并调整窗口大小调整事件）