css控制div固定在瀏覽器底部
注意:此功能僅用於頁面高度較小頁面。
代碼如下:
<html><head><style type="text/css">body{ margin:0px;}#main{ width:100%; height:50px; position:absolute; top:100%; margin-top:-50px; background:#360; color:white;}</style></head><body><div style="border:1px solid #f00;width:500px;height:1800px"></div><div id="main">bottom</div></body></html>
網上找了個更好的:
當瀏覽器視窗無限縮小,向右拖動捲軸不會出現空白。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>ie6層固定</title><style type="text/css"><!--.bookbox {background-color: #09C;height: 30px;width: 100%;position: fixed;bottom: 0px;left: auto;right: auto;line-height: 30px;text-align: center;_POSITION: absolute;/*相容IE6*/_TOP: expression(offsetParent.scrollTop+document.documentElement.clientHeight-this.offsetHeight);/*相容IE6*/}.bookbox a{color: #FFF;}--></style></head><body><div style="border:1px solid #f00;width:500px;height:2000px;">這個例子是實現層固定在瀏覽器視窗的最下面,相容IE6.<br /><br />往下看,看頁面的最下面</div><div class="bookbox">測試測試測試測試測試測試測試測試測試測試測試測試測試測試</div></body></html>
恩,感覺上面的對不是很好,這裡網上找了個,挺實用的:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">html, body { height: 100%; overflow-y: auto}body, div, p, ul, ol, li, form, input { padding: 0; margin: 0;}body{ position:relative; background: #fff;}#wp { border:1px solid #00f; height: auto; min-height: 100%; _height: 100%;}#ft { border:1px solid #f00; margin-top: -157px; padding: 50px 0 0;}#sc { border:1px solid #f00; width: 580px; margin: 0 auto; padding-left: 20px; padding-bottom: 157px;}#s { border:1px solid #f00; position: relative; height: 33px; z-index:9}</style></head><body> <div id="wp"> <div id="sc"> <div id="s"></div> </div> </div> <div id="ft"> </div></body></html>