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

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 进行设置（并根据窗口调整大小事件进行调整）