<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
}
楼上的哥们已经回答的很好了,我这里补充一下,首先建议你用火狐狸浏览器,然后安装firebug这样好调试。此外,根据经验,加2个东西
.clear{clear:bothwidth:0pxheight:0pxfont:0px/0pxoverflow:hidden}/* 清除浮动、宽、高、字样式
然后在底部的div之前(一般都是 <div class=bottom>这个标签之前加一个
<div class="clear"></div>
可以解决大多数浮动问题。