如何保证页脚文件始终保持在网页页面的底部

如在设计中我们所使用的是CSS创建一个高度自适应布局，且想要在内容不超过一屏的情况下保证页脚文件始终保持在网页页面的底部，这是一件让设计师们比较烦恼的问题。有的人会使用绝对定位的方法，这当然可以实现，不过总觉得设计上不那么美观，因此为大家整理了一个利用负值外补丁的方法来实现这个效果。

以下介绍一下具体的操作方法：

第一，首先为了让浏览器识别高度100%我们需要先给 html 和 body 加上一个高度值，同时清除所有元素的 margin 和 padding。设置完成之后，经过测试，html 和 body 的 height: 100%; 等于整个浏览器窗口的总高度，无论内容是否超过一屏。而它们下一级子元素 height: 100%; 则等于第一屏的高度。

代码如下：

* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}

第二，根据上面得出的结论，为了让布局自适应高度，我们要加上 min-height: 100%;，虽然IE不支持这个属性但是IE的 height: 100%; 有同样的作用。

代码如下：

#wrapper {
min-height: 100%;
}
* html #wrapper {
height: 100%;
}

通过上面的代码，我们得到一个最简单的最小高度满一屏的自适应布局，为了便于查看，可以添加一个宽度和背景色修饰。

代码如下：

* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
text-align: center;
font: 12px/1.4 Verdana, sans-serif;
background: #f00;
}
#wrapper {
width: 770px;
min-height: 100%;
background: #ccc;
margin: auto;
text-align: left;
}
* html #wrapper {
height: 100%;
}

一般通过上述方法即可解决这一问题，实现无论网页文件高度有多少，页脚文件始终保持在网页页面最底部。

本文来源学校官网：www.wangyeshejipx.com/，作为长春网页制作培训的专业学校，欢迎大家致电咨询。