溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么用CSS方法實現(xiàn)DIV固定網(wǎng)頁底部”，在日常操作中，相信很多人在怎么用CSS方法實現(xiàn)DIV固定網(wǎng)頁底部問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用CSS方法實現(xiàn)DIV固定網(wǎng)頁底部”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
DIV固定在網(wǎng)頁底部的CSS方法
首先看這樣一下問題：“如果有一個footer層，我想讓他固定出現(xiàn)在整個頁面的最下方，不隨著頁面中的內(nèi)容而變化，CSS中要怎樣設(shè)？比如里面是一些版權(quán)信息。因為我整頁的內(nèi)容比較少，footer老跟著內(nèi)容跑到上面去，很不美觀。”
這個問題如果在以前使用表格布局，并不困難，只要給頁面的最外層表格高度設(shè)置為100%就可以了，然而，在Web標準的規(guī)范中，表格的高度已經(jīng)屬于廢止的屬性，應(yīng)該避免使用，而且使用Web標準以后，也不在提倡使用表格布局了，那么是否有辦法使用CSS來實現(xiàn)頁面的頁腳部分固定在瀏覽器底端呢？
下面就來講解DIV固定在網(wǎng)頁底部的實現(xiàn)方法。
基本思路
首先考慮外層設(shè)置一個容器DIV，id設(shè)為#container，使他的高度為瀏覽器窗口的高度，然后將#footer這個DIV設(shè)置為#container的子DIV，并使用絕對定位的方式，使他固定到#container的底端，以實現(xiàn)希望的把DIV固定在網(wǎng)頁底部效果。
改變?yōu)g覽器的高度和寬度，可以看到Footer部分的效果。
代碼實現(xiàn)
下面先考慮HTML結(jié)構(gòu)，這個演示頁面的HTML代碼非常簡單。
Html程序代碼
<body> <DIVidDIVid="container"> <DIVidDIVid="content"> <h2>Content</h2> <p>請改變?yōu)g覽器窗口的高度，以觀察footer效果。</p> <p>這里是示例文字，DIV固定………，這里是示例文字。</p> </DIV> <DIVidDIVid="footer"> <h2>Footer</h2> </DIV> </DIV> </body>
CSS代碼：
程序代碼
body,html{ margin:0; padding:0; font:12px/1.5arial; height:100%; } #container{ min-height:100%; position:relative; } #content{ padding:10px; padding-bottom:60px; /*20px(font-size)x2(line-height)+10px(padding)x2=60px*/ } #footer{ position:absolute; bottom:0; padding:10px0; background-color:#AAA; width:100%; } #footerh2{ font:20px/2Arial; margin:0; padding:010px; }到此，關(guān)于“怎么用CSS方法實現(xiàn)DIV固定網(wǎng)頁底部”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼