页眉和页脚在内容可滚动时具有固定位置？ [英] Header and footer with fixed position while content is scrollable?

问题描述

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

I'm trying to make a website where header and footer have fixed position while content scrolls in the middle.

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

我创建了我认为可以工作，但不是。这里是 jsFiddle 与整个事情。
正如你所看到的，内容的一部分被隐藏在页脚以下（最后我看不到HELLOWEEN）。我必须改变什么来解决它？ Thanx

I created what I thought would work but it doesn't. Here's jsFiddle with the whole thing. As you can see, part of content is hidden under the footer and beyond (I can't see 'HELLOWEEN' in the end). What must I change to fix it? Thanx

推荐答案

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

The easiest fix for this is to add padding equivalent to the height of your static header and footer:

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

JSfiddle

这篇关于页眉和页脚在内容可滚动时具有固定位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！