解析DIV CSS實(shí)例：讓頁腳保持在未滿屏頁面底部
作者：admin
DIV CSS網(wǎng)頁布局有很多值得學(xué)習(xí)的地方，這里向大家描述一下DIV CSS實(shí)例，在DIV CSS布局過程中內(nèi)容不超過一屏的情況下，當(dāng)瀏覽器窗口變小那行頁腳文字會(huì)跟著向上浮動(dòng)但還是保持在底部。
這里和大家分享一下DIV CSS實(shí)例：如何讓頁腳保持在未滿屏頁面的底部，在DIV CSS布局過程中內(nèi)容不超過一屏的情況下，當(dāng)瀏覽器窗口變小那行頁腳文字會(huì)跟著向上浮動(dòng)但還是保持在底部。
DIV CSS實(shí)例：讓頁腳保持在未滿屏頁面的底部
在DIV CSS布局過程中內(nèi)容不超過一屏的情況下，當(dāng)瀏覽器窗口變小那行頁腳文字會(huì)跟著向上浮動(dòng)但還是保持在底部。
當(dāng)內(nèi)容多出一屏?xí)r，他顯示在網(wǎng)頁的最下邊，而不是窗口的最下邊；測(cè)試了一下，還可以，在IE6、IE7、FF等都沒有問題！窗口縮小時(shí)也沒有問題！下面看一下DIV CSS實(shí)例代碼。
首先是JS腳本：
ExampleSourceCode
- functiontest(){
- varinfoHeight=document.getElementById("info").scrollHeight;
- varbottomHeight=document.getElementById("bottom").scrollHeight;
- varallHeight=document.documentElement.clientHeight;
- varbottom=document.getElementById("bottom");
- if((infoHeight+bottomHeight)<allHeight){
- bottom.style.position="absolute";
- bottom.style.bottom="0";
- }else{
- bottom.style.position="";
- bottom.style.bottom="";
- }
- setTimeout(function(){test();},10);
- }
- test();
查看一下DIV CSS實(shí)例的運(yùn)行效果：
SourceCodetoRun
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <FCK:metahttp-equivFCK:metahttp-equiv="Content-Type"
- content="text/html;charset=utf-8"></FCK:meta>
- <title>Div CSS實(shí)例：讓頁腳保持在未滿屏頁面的底部</title>
- <style>
- *{margin:0;padding:0}
- #info{background:#33CCFF}
- #bottom{background:#FFCC00;width:100%;}
- </style>
- </head>
- <body>
- <dividdivid="info">
- 2<br/>2<br/>2<br/>2<br/>2<br/><br/>2<br/>2<br/>2<br/>
- 2<br/>2<br/><br/>2<br/>20000</div>
- <dividdivid="bottom">bottom</div>
- </body>
- </html>
[可先修改部分代碼再運(yùn)行查看效果]
【編輯推薦】
- DIV CSS實(shí)例教程要點(diǎn)總結(jié)
- JavaScript動(dòng)態(tài)創(chuàng)建div屬性和樣式
- CSS中border和clear兩大屬性用法揭秘
- Div CSS實(shí)例教程：頁面制作方法全程指導(dǎo)
- 解讀DIV CSS網(wǎng)頁布局中CSS無效十個(gè)原因
責(zé)任編輯：佚名
來源：
hi.baidu.com
