1、首先我们新建一个html页面，在这个html代码页面创建一个<div>标签，同时给这个<div>添加一个class类为footer。
2、然后我们设置footer类，把div固定在底部。创建<style>标签，在该标签内设置通过position: fixedbottom:0设置footer类样式，把div固定在底部。
3、然后我们保存html代码，使用浏览器打开即可看到不管如何放大缩小浏览器div都是固定在底部的。
用css动态控制footer的位置，我们可以去换个思路，只要给内容区域的高度有变化，我们将footer公共出来给各个文件调用，然后给每个页面的content区域一个不定长的高度，就解决了，如height：auto；这里通过代码来理解：<html>
<head>
<style>
.headr{
width:900px
height:30px
background:#f00//设置颜色为红色
}
.content{
width:900px
height:auto //给content的高度为auto，这样我们在每个页面中foote的位置就是变化的。
background:#0f0//设置颜色为绿色
}
.footer{
width:900px
height:200px
background:#000
}
</head>
<body>
<div class="headr" > //页头
</div>
<div class="content" > //页面
</div>
<div class="footer" > //页尾
</div>
</body>
</html>
用简单的CSS实现将FOOTER固定在页面底部,我们通常布局的时候都是头部，内容区域，还有底部，一般都是使用三个div，然后id分别设置为header，content，footer，然后在定义每个div的高度，一般来说，header，footer都是公共的，因为高度，内容一般都是固定的，底部的区域，举个例子：<html>
<head>
<style>
#header{
width:960px//通过id来控制
height:200px
}
@content{
width:960px//通过id来控制
height:auto //内容区域的高度一般都是auto的
}
#footer{
width:960px//通过id来控制
height:200px
}
</style>
</head>
<body>
<div id='header'>
<p>我是头部区域</p>
</div>
<div id='content'>
<p>我是内容区域</p>
</div>
<div id='footer'>
<p>我是低部区域</p>
</div>
</body>
</html>
