如何使层固定在网页底部?

所属分类:Javascript, 网站建设 2010-3-8,08:52 487 views

如何使层固定在网页底部? 如果抛开IE6的话,只需要CSS就可以了,所以兼容IE6还需要一段JS。

第一部分:CSS
<STYLE>

#fdc{ background:#f4f4f4 ;  width:100%; position:fixed; height:35px; left:0; bottom:0; overflow:hidden;}

.fdcnr{width:1000px; margin:0 auto; position:relative; height:35px; padding:3px 0 2px 0;}

.fdcleft{float:left;}

.fdcleft1{ float:left;}

</STYLE>

第二部分:兼容Ie6的js
<!–[if lte IE 6]>

<script type=”text/javascript”>

if(typeof document.compatMode!=’undefined’&&document.compatMode!=’BackCompat’){

cot_t1_DOCtp=”_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth – offsetWidth);}”;

}else{

cot_t1_DOCtp=”_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression(document.body.scrollLeft + document.body.clientWidth – offsetWidth);}”;

}

var fdc_bodyCSS=’* html {background:url(/images/common/blank.gif) fixed;background-repeat: repeat;background-position: right bottom;}’;

var fdcCSS=’#fdc {position:fixed;’;

var fdcCSS=fdcCSS+’_position:absolute;’;

var fdcCSS=fdcCSS+’z-index:1;’;

var fdcCSS=fdcCSS+’width:100%;’;

var fdcCSS=fdcCSS+’text-align:center;’;

var fdcCSS=fdcCSS+’bottom:0px;’;

var fdcCSS=fdcCSS+’right:0px;’;

var fdcCSS=fdcCSS+’clip:rect(0 100% 100% 0);’;

var fdcCSS=fdcCSS+cot_t1_DOCtp;

document.write(’<style type=”text/css”>’+fdc_bodyCSS+fdcCSS+’</style>’);

</script>

<![endif]–>

第三:html部分
<DIV id=”fdc”>

<DIV align=”center” style=”margin:0 auto”>

<TABLE width=”998″ border=”0″ align=”center” style=”margin:0 auto”>

<TBODY><TR>

<TD><DIV class=”fdcnr”><DIV class=”fdcleft”><A href=”http://kft.zoosnet.net/LR/Chatpre.aspx?id=KFT77879183″ target=”_blank”><IMG src=”/skin/images/fuzhou-01.gif”></A></DIV>

<DIV class=”fdcleft”>

<A href=”http://kft.zoosnet.net/LR/Chatpre.aspx?id=KFT77879183″ target=”_blank”><IMG src=”/skin/images/fuzhou-02.gif”></A>

</DIV>

<DIV class=”fdcleft”><A href=”http://kft.zoosnet.net/LR/Chatpre.aspx?id=KFT77879183″ target=”_blank”><IMG src=”/skin/images/fuzhou-03.gif”></A></DIV></DIV> </TD>

</TR>

</TBODY></TABLE>

</DIV>

</DIV>

实例参考:裕湘医院,猛击进入

<!–[if lte IE 6]>
<script type=”text/javascript”>
if(typeof document.compatMode!=’undefined’&&document.compatMode!=’BackCompat’){
cot_t1_DOCtp=”_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth – offsetWidth);}”;
}else{
cot_t1_DOCtp=”_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression(document.body.scrollLeft + document.body.clientWidth – offsetWidth);}”;
}
var fdc_bodyCSS=’* html {background:url(/images/common/blank.gif) fixed;background-repeat: repeat;background-position: right bottom;}’;
var fdcCSS=’#fdc {position:fixed;’;
var fdcCSS=fdcCSS+’_position:absolute;’;
var fdcCSS=fdcCSS+’z-index:1;’;
var fdcCSS=fdcCSS+’width:100%;’;
var fdcCSS=fdcCSS+’text-align:center;’;
var fdcCSS=fdcCSS+’bottom:0px;’;
var fdcCSS=fdcCSS+’right:0px;’;
var fdcCSS=fdcCSS+’clip:rect(0 100% 100% 0);’;
var fdcCSS=fdcCSS+cot_t1_DOCtp;
document.write(’<style type=”text/css”>’+fdc_bodyCSS+fdcCSS+’</style>’);
</script>
<![endif]–>

Leave a Reply