<body>
<DIV id="container">
<DI id="content">
<h1>Content</h1>
<p>请改变浏览器窗口的高度，以观察footer效果。</p>
<p>这里是示例文字，DIV固定………，这里是示例文字。</p>
</DIV>
<DIV Vid="footer">
<h1>Footer</h1>
</DIV>
</DIV>
</body>
CSS代码：
程序代码
body,html{
margin:0
padding:0
font:12px/1.5arial
height:100%
}
#container{
min-height:100%
position:relative
}
#content{
padding:10px
padding-bottom:60px
/*20px(font-size)
x2(line-height)+10px(padding)x2=60px*/
}
#footer{
position:absolute
bottom:0
padding:10px0
background-color:#AAA
width:100%
}
#footerh1{
font:20px/2Arial
margin:0
padding:010px
}
<script language="javascript">function diff(x){
ie4=(document.all)?true:false
if (ie4){
block=x.style
}
var a=screen.width
switch (a){
case 1024:
block.left=""+(parseInt(block.left)+112)
break
case 1152:
block.left=""+(parseInt(block.left)+176)
break
case 1280:
block.left=""+(parseInt(block.left)+240)
break
}}
</script>
<div id="mooon" style="position:relativewidth:350pxheight:14pxz-index:1background-color: #cccccclayer-background-color: #6699ccborder: 1px none #000000left:150pxtop:385px">
层的内容 </div>
<script>diff(mooon)</script>
注意：上面这种方法能实现层的固定，但有一个问题是要固定的这个层会独占用高度，以下的方法可以解决：
<div id="Layer1" style="position:absolutewidth:49pxheight:14px">
<div id="mooon" style="position:absolutewidth:645pxheight:43pxz-index:1layer-background-color: #6699ccborder: 0px none #000000left:330pxtop:380px">内容
＜／div＞
</div>
这些代码可以让层固定显示
有两种方式；一种是绝对定位方式，一种是通过固定定位方式(固定定位是浮动在浏览器的固定位置的，就是不能随浏览器的滚动而变化，始终在浏览器的底部)；能用到的css样式：position:absoluteposition:fiexd
<div class="navdown" style="width:1000pxheight:50px">
<li>导航</li><li>导航</li><li>导航</li><li>导航</li><li>导航</li><li>导航</li>
</div>
css:
.navdown{position:absolute:bottom:0}
.navdown{position:fiexdbottom:0}
