CSS实现DIV框固定在浏览器右下角(即不随滚动条滚动)

html+div+css 2136 0 2013-11-28

CSS实现DIV框固定在浏览器右下角(即不随滚动条滚动)
STYLE CODE:
#INDEXT_RB_AD{
clear:both; width:252px; height:198px; z-index:1000; overflow:hidden;
bottom:5px; right:5px;

/* 火狐、Google浏览器只需要后面这一句代码即可 */
position:fixed !important;

/* 以下代码是针对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) );
}

HTML CODE:
<div style="background:#FCC; width:100px; height:1000px"></div>

<div id="INDEXT_RB_AD" style="display:;">
<div style='border:#CDCDCD 1px solid;Z-INDEX:99999; width:250px;POSITION:absolute; top:0px; height:196px;' >
<table width='100%' border='0' cellpadding='0' cellspacing='0' style='border-top:#ffffff 1px solid;' bgcolor='#F2F2F2'>
<tr>
<td height='26' style='font-size:12px;color:#444444;padding-top:4px;padding-left: 10px;font-weight:bold' valign='middle' width='86%'>网站公告</td>
<td width='14%' align='center'><a onclick="document.getElementById('INDEXT_RB_AD').style.display = 'none';" title='关闭' style='font-size:12px;color:#444444;padding-top:4px;cursor:hand;'>关闭</a></td>
</tr><tr><td colspan='2' height='165' bgcolor='#ffffff'>
<div style='padding: 13px; border-top: #CDCDCD 1px solid;  font-size: 12px; width: 224px; color: #666666;  height: 138px'><div style="width:224px; float:left; height:30px;"><a href="[field:arcurl/]" target="_blank" style="font-weight:bold; font-size:14px; color:#3F8A14">网站公告标题标题</a></div><div style="width:224px; height:85px; overflow:hidden; line-height:24px; float:left">网站公告标题标题内容内容,网站公告标题标题内容内容,网站公告标题标题内容内容,网站公告标题标题内容内容...</div><div style="width:224px; height:24px; overflow:hidden; line-height:24px; border-top:dotted 1px #CDCDCD; text-align:right; vertical-align:bottom; padding-top:5px; float:left;"><a href="[field:arcurl/]" target="_blank" style="font-size:12px; color:#3F8A14">查看>></a></div></div></tr></table>
</div></div>

效果图:

上一篇:CSS知识点精简集合,一点点积累下来存点经验

下一篇:CSS实现半透明,兼容IE和火狐

讨论数量:0

请先登录再发表讨论。 2024-11-24

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链