作家
登录

对网页中层的固定实现代码

作者: 来源:www.28hudong.com 2012-11-19 17:37:52 阅读 我要评论

对于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

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)