溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家?guī)碛嘘P如何解析在DIV CSS中頁腳保持在未滿屏頁面底部，文章內容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
這里和大家分享一下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中頁腳保持在未滿屏頁面底部了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。
