层的固定对于DIV+CSS不熟悉的我，为此加班加点在项目上线时把问题解决了。参考代码如下：
<!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="GBK"/> <title>固定上下层的位置</title> <style type="text/css"> <!-- body { background-image: url(0); background-attachment: fixed; } #BottomNav { background: #9F6; z-index: 999; position: fixed; bottom: 0; left: 0; width: 100%; height: 30px; position:fixed; top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); overflow: visible; } #topNavWrapper { height: 30px; margin: 0px auto; width:100%; z-index:100; position:fixed ; top:0px; left:0; background: #9F6; } #center { width: 100%; height:100%; padding-top:30px; padding-bottom:30px; } --> </style> </head> <body> <div id="topNavWrapper">固定悬浮导航在此处,不随滚动条的滚动变化</div> <div id="center"> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> <p>我是中间层</p> </div> <div id="BottomNav">固定悬浮导航在此处,,不随滚动条的滚动变化</div> </body> </html>
层的固定
|
