wordpress 模板层次结构信息图/商丘seo推广
正如你所提到的，position：fixed将使页脚与视口相对而非页面本身定位。因此，我们必须将元素保持在正常流程中，并以某种方式将其定位到页面的底部。
有几种方法来实现这一点，这些方法已经在野外讨论了。
例如：
粘页脚
在这个答案中，我会和Ryan Fait’s method一起去，因为它很简单易懂，也符合你的需要(页眉和页脚都有固定高度的情况)。
考虑到以下结构：
需要以下步骤：
>设置< html>的高度和< body>元素到100％是下一步需要的1。
>我们需要做的最重要的事情是确保#content足够高以将#footer推到页面的下方。因此，我们给#content的最小高度为100％。
> So far，#content已经占据了视口的100％的高度，因此我们应该将页脚放在页面的底部。为了做到这一点，我们可以给#content一个负的边际底线相当于页脚的高度。还要确保页脚出现在内容的顶部，我们应该将页脚相对位置。 Demo Here。
>可以看出，当#内容由其内容增长时，一些内容会在页脚后面。我们可以通过在#content的末尾附加一个间隔元素来避免这种情况，也可以使用padding-bottom和box-sizing: border-box2的组合，这个值应该是supported on IE8。
4.1添加间隔物
.spacer, #footer { height: 100px; }
4.2填充底部和箱子尺寸的组合
#content {
min-height: 100%;
margin-bottom: -100px; /* Equivalent to footer's height */
padding-bottom: 100px; /* Equivalent to footer's height */
box-sizing: border-box;
}
(请注意，由于简洁，省略了供应商前缀)
添加标题
>如果标题应保持正常流程，您可以简单地将其添加到#content中，如下所示：
(Example Here)
...
>但是如果它应该是绝对的3，我们需要按照to prevent overlapping的顺序推送#content元素的内容。
因此，再次，我们可以在#content(Example Here)的开头添加一个间隔符：
或者使用padding-top和box-sizing的组合如下：
#content {
min-height: 100%;
margin-bottom: -100px; /* Equivalent to footer's height */
padding-top : 50px; /* Equivalent to header's height */
padding-bottom: 100px; /* Equivalent to footer's height */
box-sizing: border-box;
}
Updated Example(请注意，由于简洁而省略了供应商前缀)
最后但并非不重要！
如今，所有主流的现代网络浏览器都支持box-sizing: border-box声明(包括IE8)。但是，如果您正在寻找具有更广泛浏览器支持的传统方式，请使用间隔元素。
这是需要使min-height: 100%在#content元素上工作(因为百分比值相对于由< body>建立的框的包含块的高度)。另外< html>应该有一个明确的height使高度：100％在< body>上工作。
box-sizing: border-box使UA计算包括填充和边框在内的框的宽度/高度。
According to spec，绝对定位的元素是具有绝对或固定位置的元素。