DivCSS實(shí)例：讓頁腳保持在未滿屏頁面的底部_Div+CSS教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
DivCSS實(shí)例：讓頁腳保持在未滿屏頁面的底部
在內(nèi)容不超過一屏的情況下，當(dāng)瀏覽器窗口變小那行頁腳文字會(huì)跟著向上浮動(dòng)但還是保持在底部。
當(dāng)內(nèi)容多出一屏?xí)r，他顯示在網(wǎng)頁的最下邊，而不是窗口的最下邊；測試了一下，還可以，在IE6、IE7、FF等都沒有問題！窗口縮小時(shí)也沒有問題！
首先是JS腳本：
查看運(yùn)行效果：
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
在內(nèi)容不超過一屏的情況下，當(dāng)瀏覽器窗口變小那行頁腳文字會(huì)跟著向上浮動(dòng)但還是保持在底部。
當(dāng)內(nèi)容多出一屏?xí)r，他顯示在網(wǎng)頁的最下邊，而不是窗口的最下邊；測試了一下，還可以，在IE6、IE7、FF等都沒有問題！窗口縮小時(shí)也沒有問題！
首先是JS腳本：
示例代碼 [www.ghpqjb.com]
function test(){
var infoHeight = document.getElementById("info").scrollHeight;
var bottomHeight = document.getElementById("bottom").scrollHeight;
var allHeight = document.documentElement.clientHeight;
var bottom = 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();
var infoHeight = document.getElementById("info").scrollHeight;
var bottomHeight = document.getElementById("bottom").scrollHeight;
var allHeight = document.documentElement.clientHeight;
var bottom = 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();
查看運(yùn)行效果：
代碼調(diào)試框 [www.ghpqjb.com]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
/所屬分類：Div+CSS教程/更新時(shí)間：2008-06-05
相關(guān)Div+CSS教程：
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ)：常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
猜你也喜歡看這些
- Web標(biāo)準(zhǔn)實(shí)戰(zhàn)CSS網(wǎng)頁布局豆瓣首頁
- 利用CSS同比例縮小圖片并且符合Web標(biāo)準(zhǔn)
- CSS菜單實(shí)例：極致而簡約的風(fēng)格
- CSS實(shí)例：區(qū)分IE6、IE7、FF對(duì)HR解釋的CSShack
- CSS去除表格td默認(rèn)間距及制作1px細(xì)線表格
- 10個(gè)很酷的涂鴉風(fēng)格國外網(wǎng)店設(shè)計(jì)展示
- CSS實(shí)例教程：用列表ul制作CSS橫向菜單的基礎(chǔ)知識(shí)
- DIV CSS網(wǎng)頁布局分析的兩個(gè)小例子
- DOV CSS表單：超炫的單選框與復(fù)選框效果！-Adam
- DivCSS實(shí)例：一個(gè)效果很不錯(cuò)的CSS列表
- 相關(guān)鏈接：
- 教程說明：
Div+CSS教程-DivCSS實(shí)例：讓頁腳保持在未滿屏頁面的底部
。