<!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>
原文地址:http://sm0210.blog.163.com/blog/static/51839100201371529282/