JS 让div始终浮动在浏览器底部

JavaScript026

JS 让div始终浮动在浏览器底部,第1张

body {margin:0 padding:0 10px 0 10pxheight:100%overflow:autobackground:#333font-size:12px}

#wrap {display:blockbottom:0pxright:1px!importantright:18pxwidth:200pxline-height:30pxposition:fixedborder:1px solid #ffftext-align:centercolor:#fff background:#000}

*html{overflow-x:autooverflow-y:auto}

* html #wrap {position:absolute}

上面是样式部分

<div style="height:3986px"></div>

<div id="wrap">我是不会动的，只有这个地方是属于我的，在你没有更改我的位置之前。<br>

<a href="http://www.CsrCode.cn&quot>CsrCode.CN</a>丨<a href="http://www.CsrCode.cn&quot>芯晴网页特效</a>丨<a href="http://www.CsrCode.cn&quot>seo优化</a>

这是HTML部分

开玩笑！你直接复制过去！

页面的其他部分有没有设置定位！有的话删除！

自己看有没有在。看下自己页面其他地方有没设置定位。有的话删了

<HTML>

<HEAD>

<title>让footer总是停留在页面的底部</title>

<script language="javascript">

<!--

function moveFooter() {

var iBottom = 0

if (document.all) {

if (parseInt(document.body.scrollHeight) >parseInt(document.body.clientHeight)) {

iBottom = parseInt(document.body.scrollHeight)

}

else iBottom = parseInt(document.body.clientHeight)

document.all["lyfooter"].style.pixelTop = iBottom - parseInt(document.all["lyfooter"].style.height)

document.all["lyfooter"].style.visibility = "visible"

}

else if (document.layers){

if (document.height >self.innerHeight) {

iBottom = document.height

}

else iBottom = self.innerHeight

document.layers["lyfooter"].top = parseInt(iBottom - document.layers["lyfooter"].document.height)

document.layers["lyfooter"].visibility = "visible"

}

else if (document.getElementById) { //NS6

if (document.height >self.innerHeight) {

iBottom = document.height

}

else iBottom = self.innerHeight

document.getElementById("lyfooter").style.top = (parseInt(iBottom - parseInt(document.getElementById("lyfooter").style.height))) + "px"

document.getElementById("lyfooter").style.visibility = "visible"

}

}

//-->

</script>

</HEAD>

<body MS_POSITIONING="GridLayout" onresize="moveFooter()" onload="moveFooter()">

<form id="Form1" method="post">

<!----bottom part--------->

<div id="lyfooter" style="position:absoluteleft:0pxtop:100pxheight:19pxz-index:2visibility:hidden">

<table border="0" width="100%" cellspacing="0" cellpadding="3">

<tr>

<td width="100%" bgColor="#319a63" class="footnote"><font color="#ffffff" size="2px" face="Verdana, Arial, Helvetica, sans-serif">©

2005 ABCDE, Inc.</font></td>

</tr>

</table>

</div>

<!----/bottom part--------->

</form>

</body>

</HTML>

建议使用css实现，效果更佳，使用position: fixed，固定定位，具体位置的调整是用top、left、right、bottom也可以使用margin调整

css实现代码

<div style="position: fixedtop:100px left: auto right: auto  bottom: auto " ></div>

一般的网站的浮动广告以及浮动菜单等可以使用fixed来实现，js的话需要计算位置以及滚动条滚动时触发事件从而进行计算使用window.onscroll事件代码如下

HTML部分代码

<div style="position:absolutebackground-color:redwidth: 50pxheight: 50px" id="box"></div>

Javascript部分代码

window.onscroll=function(){

    var box= document.getElementById("box")

    var t = document.documentElement.scrollTop || document.body.scrollTop

    box.style.top=t+"px"

}