>不与位置：固定 – 我不希望它保留在屏幕上，它应该是在页面的最后，并在滚动时表现正常。
>不在可见屏幕的底部 – 在页面的底部，即毕竟其他内容。
这是一个更好地解释的图表：
以下是代码：
>我准备了一个演示：JSFiddle
>或见下文
<div id="header">Header</div>
<div id="content">
<p>Some content...</p>
</div>
<div id="footer">Footer</div>
body{
/* Just to enable scrolling in JSFiddle */
height: 1000px;
}
#header{
width: 100%;
height: 100px;
position: fixed;
top: 0px;
z-index: 1;
}
#content{
width: 100%;
position: absolute;
top: 100px; /*Height of header*/
z-index: 0;
}
#footer{
width: 100%;
height: 100px;
position: absolute;
bottom: 0px;
}
/*For demo only*/
#header,#footer{
border: 3px dashed #333333;
background: #FFFFFF;
}
#content{
background: #CCCCCC;
height: 200px;
}
解决方法
> A List Apart的文章Exploring Footers – 到Bobby Van Der Sluis，2004
> footerStickAlt – 截至Craig Erskine，2005
> Sticky Footer – Shelly Cole，2006
> How to keep footers at the bottom of the page – Matthew James Taylor，2007
> Make the Footer Stick to the Bottom of a Page – Ryan Fait，2007
> Refined version of Ryan Fait’s Sticky Footer – 截至Chris Coyier，2009
> Sticky CSS footers: The flexible way(使用CSS Tables) – 到Torben Haase，2011
> Responsive Sticky Footer(精简版Torben的方法) – 到Joshua Cook，2013
> Solved by Flexbox的Sticky Footer – 截至Philip Walton，2013
粘页脚
在这个答案中，我会和Ryan Fait’s method一起去，因为它很简单易懂，也符合你的需要(页眉和页脚都有固定高度的情况)。
考虑到以下结构：
<div id="content"> <!-- content goes here. It may (not) include the header --> </div> <div id="footer">Footer</div>
需要以下步骤：
>设置< 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添加间隔物
<div id="content">
<!-- content goes here -->
<div class="spacer"></div>
</div>
<div id="footer">Footer</div>
.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)
<div id="content">
<div id="header">Header</div>
...
>但是如果它应该是绝对的3，我们需要按照to prevent overlapping的顺序推送#content元素的内容。
因此，再次，我们可以在#content(Example Here)的开头添加一个间隔符：
<div id="header">Header</div>
<div id="content">
<div class="header-spacer"></div>
<!-- content goes here -->
<div class="footer-spacer"></div>
</div>
<div id="footer">Footer</div>
或者使用padding-top和Box-sizing的组合如下：
<div id="header">Header</div> <div id="content"> <!-- content goes here. --> </div> <div id="footer">Footer</div>
#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，绝对定位的元素是具有绝对或固定位置的元素。
