<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用CSS将Div固定在窗口的右下(xià)角</title>
<style>
#INDEXT_RB_AD{
clear:both; width:200px; height:100px; z-index:1000; overflow:hidden; border:1px #ccc solid;
bottom:5px; right:5px;
/* 火(huǒ)狐、Google浏覽器隻需要後面這一(yī)句代碼即可 */
position:fixed !important;
/* 以下(xià)代碼是針對IE6的 */
_position:absolute;
_top: expression( eval( document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight - (parseInt(this.currentStyle.marginTop,10)||0) - (parseInt(this.currentStyle.marginBottom,10)||0) ) - (parseInt(this.currentStyle.bottom,10)||0) );
}
</style>
</head>
<body>
<div style="height:2000px;">使用CSS将Div固定在窗口的右下(xià)角</div>
<div id="INDEXT_RB_AD" style="display:;">
<div align="right" style=" width:100%; height:25px; line-height:25px; cursor:pointer; " onclick="document.getElementById('INDEXT_RB_AD').style.display = 'none';">關閉</div>
<div>這裏是您要顯示的内容</div>
</div>
</body>
</html>
==============================================================================
如果要将該功能寫入js文件裏,供網站多個頁面同時調用,可以使用下(xià)列代碼
==============================================================================
<script>
//var RB_FLOAT_AD = "no"; //在不需要顯示的頁面加上此行代碼
if ( typeof(RB_FLOAT_AD) == "undefined" || RB_FLOAT_AD != "no" ){
//輸出CSS樣式
document.write('<style>#INDEXT_RB_AD{ clear:both; width:200px; height:100px; z-index:1000; overflow:hidden; border:1px #ccc solid; bottom:10px; right:5px; /* 火(huǒ)狐、Google浏覽器隻需要後面這一(yī)句代碼即可 */ position:fixed !important; /* 以下(xià)代碼是針對IE6的 */ _position:absolute; _top: expression( eval( document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight - (parseInt(this.currentStyle.marginTop,10)||0) - (parseInt(this.currentStyle.marginBottom,10)||0) ) - (parseInt(this.currentStyle.bottom,10)||0) ); }</style>');
//
document.write('<div id="INDEXT_RB_AD" style="display:;"><div align="right" style=" width:100%; height:25px; line-height:25px; cursor:pointer;" onclick="document.getElementById('INDEXT_RB_AD').style.display = 'none';">關閉</div><div>這裏是您要顯示的内容</div></div>');
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用CSS将Div固定在窗口的右下(xià)角</title>
<style>
#INDEXT_RB_AD{
clear:both; width:200px; height:100px; z-index:1000; overflow:hidden; border:1px #ccc solid;
bottom:5px; right:5px;
/* 火(huǒ)狐、Google浏覽器隻需要後面這一(yī)句代碼即可 */
position:fixed !important;
/* 以下(xià)代碼是針對IE6的 */
_position:absolute;
_top: expression( eval( document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight - (parseInt(this.currentStyle.marginTop,10)||0) - (parseInt(this.currentStyle.marginBottom,10)||0) ) - (parseInt(this.currentStyle.bottom,10)||0) );
}
</style>
</head>
<body>
<div style="height:2000px;">使用CSS将Div固定在窗口的右下(xià)角</div>
<div id="INDEXT_RB_AD" style="display:;">
<div align="right" style=" width:100%; height:25px; line-height:25px; cursor:pointer; " onclick="document.getElementById('INDEXT_RB_AD').style.display = 'none';">關閉</div>
<div>這裏是您要顯示的内容</div>
</div>
</body>
</html>
==============================================================================
如果要将該功能寫入js文件裏,供網站多個頁面同時調用,可以使用下(xià)列代碼
==============================================================================
<script>
//var RB_FLOAT_AD = "no"; //在不需要顯示的頁面加上此行代碼
if ( typeof(RB_FLOAT_AD) == "undefined" || RB_FLOAT_AD != "no" ){
//輸出CSS樣式
document.write('<style>#INDEXT_RB_AD{ clear:both; width:200px; height:100px; z-index:1000; overflow:hidden; border:1px #ccc solid; bottom:10px; right:5px; /* 火(huǒ)狐、Google浏覽器隻需要後面這一(yī)句代碼即可 */ position:fixed !important; /* 以下(xià)代碼是針對IE6的 */ _position:absolute; _top: expression( eval( document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight - (parseInt(this.currentStyle.marginTop,10)||0) - (parseInt(this.currentStyle.marginBottom,10)||0) ) - (parseInt(this.currentStyle.bottom,10)||0) ); }</style>');
//
document.write('<div id="INDEXT_RB_AD" style="display:;"><div align="right" style=" width:100%; height:25px; line-height:25px; cursor:pointer;" onclick="document.getElementById('INDEXT_RB_AD').style.display = 'none';">關閉</div><div>這裏是您要顯示的内容</div></div>');
}
</script>
文章來源:桂林視窗生(shēng)活網