固定页面顶部或底部的HTML/CSS

最新推荐文章于 2022-02-15 01:34:29 发布

aha5675

最新推荐文章于 2022-02-15 01:34:29 发布

阅读量111

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/Zpyboke/p/5200027.html

版权


<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
/*浮动上一步 下一步菜单*/
.footpanel {
 position: fixed;
 bottom: 0; left: 0;
 z-index: 9999; /*--Keeps the panel on top of all other elements--*/
 width: 96%;
 text-align:left;
 padding-left:20px;
 padding-right:0px;
 margin:0px;
}

*html .footpanel { /*--IE6 Hack - Fixed Positioning to the Bottom--*/
 margin-top: -1px; /*--prevents IE6 from having an infinity scroll bar - due to 1px border on #footpanel--*/
 position: absolute;
 top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}

.tooal{
 position:fixed;
    width:99%;
    z-index: 9999; /*--Keeps the panel on top of all other elements--*/
    left:0;
    top:0; 
   
}
</style>
</head>

<body>
 <div style="border:1px solid #000000;margin-top:10px;"class="tooal">顶部菜单工具栏</div>

 <div style="border:1px solid red;height:1500px;margin-top:50px;">
  中间区域内容中间区域内容..................
 </div>
 
 <br/><br/>
 <div style="border:1px solid #990000;" class="footpanel">底部菜单工具栏</div>
</body>
</html>