当网页内容不足的时候,body和html的实际高度可能小于浏览器的可视范围,因此给body和html写上高度100%。此外,接下来的直接子元素也会使用百分比的写法,百分比的写法必须在直接父元素有确定的高度定义时才有效。
CSS Code复制内容到剪贴板
.wrapper{
min-height:100%;
_height:100%;
margin-bottom:-120px; /*假定页脚的高度为120px*/
}
所有网页内容都在这个div.wrapper中,定义最小高度(IE6使用hack),由于这个元素的父元素就是定义了100%高度的body,因此无论内容多少,div.wrapper这个元素的高度都会占据整个浏览器可视范围。然后,依照页脚的高度,设置相等的下边距负值,这样页脚就会恰好出现在页面内容的最后。
CSS Code复制内容到剪贴板
.footer, .footer_placeholder{height:120px;} /*假定页脚的高度为120px*/
div.footer_placeholder,如字面意义,页脚的占位元素,它只是一个空的div,定义高度和页脚相同,它的存在是为了给页脚留下位置。如果没有它,可能会发生这样的事情↓
到这里,固定在底部的页脚就已经实现了。css部分合起来是:
CSS Code复制内容到剪贴板
html, body{height:100%;}
.wrapper{
min-height:100%;
_height:100%;
margin-bottom:-120px; /*假定页脚的高度为120px*/
}
.footer, .footer_placeholder{height:120px;}
如果还需要考虑css初始化和清理浮动,可能你还需要添加下面这部分css:
body{margin:0;}
.footer_placeholder{clear:both;}










