对于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>
推荐阅读
浏览器默认样式
熟悉这些之后可以明白 一、使用CSS reset的原因。 二、*{margin:0;padding:0;}一刀切的做法为什么不提倡 三、网上广泛流传的CSSreset为什么也有人不提倡 从对比图可以看出,不部分标签其实是没有margin或者paddi>>>详细阅读
本文标题:对网页中层的固定实现代码
地址:http://www.17bianji.com/kaifa2/CSS/16510.html
1/2 1