那么如何将Web页面的 “footer”部分永远固定在页面的底部呢？（注意了这里所说的是页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部）
就是当内容只有一点点时，Web页面显示在浏览器底部，当内容高度超过浏览器高度时，Web页面的footer部分在页面的底部，总而言之Web页面的footer部分永远在页面的底部，也就是，Footer部分永远沉底。
- 方法
1. HTML结构：
<div id="container">
<div class="content">
<ul>
<li>内容</li>
</ul>
<div class="footer"></div>
</div>
</div>2. CSS代码：
* {
padding: 0;
margin: 0;
list-style: none;
}
html,
body {
height: 100%;
}
#container {
height: 100%;
background-color: red;
overflow-x: hidden;
}
.content {
position: relative;
min-height: 100%;
background-color: yellow;
padding-bottom: 70px;
box-sizing: border-box;
}
.footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 70px;
background-color: blue;
}
<div class="container">
<div class="content">
<ul>
<li>内容</li>
</ul>
<div class="footer"></div>
</div>
</div>- 原理
- <html>和<body>标签：html和body标签中必须将高度(height)设置为“100%”,这样我们就可以在容器上设置百分比高度。同时需要将html,body的margin和padding都移除，也就是html,body的margin和padding都为0。
- div#container容器：div#container容器将高度(height)设置为“100%”;overflow-x: hidden;，好让内容在container容器内滚动。
- div.content容器：div.content容器必须设置一个最小高度(min-height)为100％，这主要使他在内容很少（或没有内容）情况下，能保持100％的高度。另外我们还需要在div.content容器中设置一个"position:relative"以便于里面的元素进行绝对定位。再有就是设置一个padding-bottom值，而且这个值要等于（或略大于）页脚div.footer的高度（height）值。
- div.footer容器：div.footer容器必须设置一个固定高度。div.footer还需要进行绝对定位，并且设置bottom:0，让div.footer固定在容器div.content的底部。这样就可以实现我们前面所说的效果，当内容只有一点时，div.footer固定在屏幕的底部（因为div.content设置了一个min-height:100%），当内容高度超过屏幕的高度，div.footer也固定在div.content底部，也就是固定在页面的底部。
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。