解析DIV CSS實例：讓頁腳保持在未滿屏頁面底部
作者：admin
DIV CSS網頁布局有很多值得學習的地方，這里向大家描述一下DIV CSS實例，在DIV CSS布局過程中內容不超過一屏的情況下，當瀏覽器窗口變小那行頁腳文字會跟著向上浮動但還是保持在底部。
這里和大家分享一下DIV CSS實例：如何讓頁腳保持在未滿屏頁面的底部，在DIV CSS布局過程中內容不超過一屏的情況下，當瀏覽器窗口變小那行頁腳文字會跟著向上浮動但還是保持在底部。
DIV CSS實例：讓頁腳保持在未滿屏頁面的底部
在DIV CSS布局過程中內容不超過一屏的情況下，當瀏覽器窗口變小那行頁腳文字會跟著向上浮動但還是保持在底部。
當內容多出一屏時，他顯示在網頁的最下邊，而不是窗口的最下邊；測試了一下，還可以，在IE6、IE7、FF等都沒有問題！窗口縮小時也沒有問題！下面看一下DIV CSS實例代碼。
首先是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實例的運行效果：
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實例：讓頁腳保持在未滿屏頁面的底部</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>
[可先修改部分代碼再運行查看效果]
【編輯推薦】
- DIV CSS實例教程要點總結
- JavaScript動態創建div屬性和樣式
- CSS中border和clear兩大屬性用法揭秘
- Div CSS實例教程：頁面制作方法全程指導
- 解讀DIV CSS網頁布局中CSS無效十個原因
責任編輯：佚名
來源：
hi.baidu.com
