页眉和页脚固定位置，内容可以滚动吗？

Question

我正在尝试制作一个网站，在这个网站中，页眉和页脚具有固定位置，而内容则在中间滚动。

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

我创建了我认为会起作用的东西，但实际上并没有。这里是jsFiddle与整个内容。

正如你所看到的，部分内容被隐藏在页脚下方和更远的地方（我看不到结尾处的“HELLOWEEN”）。我需要改变什么来解决它？谢谢。

- Michal Artazov

---

那个小提琴在Chrome上对我有效。我将顶部一行更改为“主页1”，当滚动条移到顶部时，它会出现在红色栏的下方。 - Lee Meador

Answer 1

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

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

JSfiddle

- Nick Tomlin

---

@MichalArtazov 一开始看起来这似乎是解决方案，直到您滚动内容。滚动条重叠在标题上，这并不理想，因为标题没有滚动。应该是内容部分本身仅有滚动条，标题和页脚没有滚动条。请参见peterchon提供的JSFiddle 解决方案。 - dfashimpaur

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

- peterchon

---

那是一种方法，但不适合我的情况，无论如何谢谢。 - Michal Artazov

Answer 3

1. 移除页眉和页脚的位置样式
2. 在内容上设置高度
3. 向内容添加样式overflow-y:auto

如果你想让内容高度与浏览器窗口匹配（减去页眉和页脚的高度），使用JavaScript设置（并在窗口调整大小事件上进行调整）

- Stephen Thomas

---

也是一个有趣的解决方案，但不适合我的情况，无论如何还是谢谢。 - Michal Artazov