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

【问题标题】：Header and footer with fixed position while content is scrollable?内容可滚动时具有固定位置的页眉和页脚？
【发布时间】：2013-08-13 17:44:00
【问题描述】：

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

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

我创造了我认为可行的东西，但它没有。这是jsFiddle 的全部内容。如您所见，部分内容隐藏在页脚下方（最后我看不到“HELLOWEEN”）。我必须改变什么来修复它？谢谢

【问题讨论】：

那个小提琴在 Chrome 上对我有用。我将第一行更改为“Home 1”，当滚动条移到顶部时，它出现在红色条下方。

标签： html css css-position

【解决方案1】：

最简单的解决方法是添加与静态页眉和页脚高度相等的填充：

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

JSfiddle

【讨论】：

就是这样，非常感谢
@MichalArtazov 乍一看，这看起来像是解决方案，直到您滚动内容。滚动条与标题重叠，这是不理想的，因为标题不滚动。应该是内容部分本身只有滚动条，页眉和页脚没有滚动条。请参阅 peterchon 解决方案提供的JSFiddle。

【解决方案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;}

【讨论】：

这是一种方法，但不适合我的情况，反正thanx

【解决方案3】：

移除页眉和页脚的位置样式
为内容设置高度
在内容中添加样式overflow-y:auto

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

【讨论】：

也是一个有趣的解决方案，但不适合我的情况，反正thanx