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