日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

模板無(wú)憂

每日更新|TOP排行榜|Tag標(biāo)簽|充值

無(wú)憂首頁(yè) 網(wǎng)頁(yè)模板程序模板建站教程視頻教程網(wǎng)頁(yè)特效圖標(biāo)素材字體下載站長(zhǎng)工具站長(zhǎng)問(wèn)答

Div+Css教程模板無(wú)憂>建站教程>Div+Css教程>Div+CSS教程>

收藏分享查看評(píng)論 Div+CSS教程

DivCSS實(shí)例：讓頁(yè)腳保持在未滿屏頁(yè)面的底部_Div+CSS教程

編輯Tag賺U幣

教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!

　　DivCSS實(shí)例：讓頁(yè)腳保持在未滿屏頁(yè)面的底部

　　在內(nèi)容不超過(guò)一屏的情況下，當(dāng)瀏覽器窗口變小那行頁(yè)腳文字會(huì)跟著向上浮動(dòng)但還是保持在底部。
　　當(dāng)內(nèi)容多出一屏?xí)r，他顯示在網(wǎng)頁(yè)的最下邊，而不是窗口的最下邊；測(cè)試了一下，還可以，在IE6、IE7、FF等都沒有問(wèn)題！窗口縮小時(shí)也沒有問(wèn)題！

　　首先是JS腳本：

示例代碼 [hl5o.cn]

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();

　　查看運(yùn)行效果：

代碼調(diào)試框 [hl5o.cn]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DivCSS實(shí)例：讓頁(yè)腳保持在未滿屏頁(yè)面的底部</title>
<style>
*{ margin:0; padding:0}
#info{background:#33CCFF}
#bottom{background:#FFCC00;width:100%;}
</style>
</head>
<body>
<div   class="znjbzjn"   id="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>
<div   class="znjbzjn"   id="bottom">bottom</div>

<script language="JavaScript" type="text/javascript">
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();
</script>
</body>
</html>

[ 可先修改部分代碼再運(yùn)行查看效果 ]

　　

網(wǎng)站制作在線視頻教程 網(wǎng)站制作視頻教程打包下載

CSS視頻教程

CSS設(shè)計(jì)徹底研究視頻教程

網(wǎng)頁(yè)制作基礎(chǔ)教程

網(wǎng)站重構(gòu)&web標(biāo)準(zhǔn)設(shè)計(jì)教程

div css視頻教程

DIV + CSS 入門視頻教程，只用記事本編寫代碼演示

精通CSS+DIV網(wǎng)頁(yè)樣式與布局配套視頻教程

別具光芒：DIV+CSS網(wǎng)頁(yè)布局與美化

DIV.CSS應(yīng)用視頻教程(DIV+CSS)

所屬分類：Div+CSS教程/更新時(shí)間：2008-06-05

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)Div+CSS教程：

Div+CSS教程Rss訂閱Div+Css教程搜索

Div+CSS教程推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁(yè)鏈接| 搜索DivCSS實(shí)例：讓頁(yè)腳保持在未滿屏頁(yè)面的底部
教程說(shuō)明：
Div+CSS教程-DivCSS實(shí)例：讓頁(yè)腳保持在未滿屏頁(yè)面的底部。