CSS固定顶底之一
2015-06-01 23:18
615 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>IE下的纯CSS完美position:fixed实现方案</title> <style type="text/css"> html,body{margin:0px;height:100%;overflow:hidden;font-size:12px;} /* 核心样式定义 */ .wrapper{ position:relative; width:100%; height:100%; overflow:auto; } .fixed-box{ position:fixed; } * html .fixed-box{ position:absolute; z-index:100; } /* 使用例子 */ #topBox, #leftBox, #bottomBox{ padding:5px; border:1px solid #aaa; background-color:#fee; font-size:12px; } #topBox{ width:100%; left:0px; top:0px; } #leftBox{ width:150px; left:50%; top:150px; margin:0 0 0 -200px; } #bottomBox{ width:100%; left:0px; bottom:0px; } </style> </head> <body> <div class="wrapper"> <div style="height:2000px;"> <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> <div id="topBox" class="fixed-box"> <p><b>固定在顶部</b></p> <p> 该解决方案完美实现了 position:fixed 效果,完美支持 ie5.5+, firefox, opera, chrome等主流浏览器。 </p> </div> <div id="leftBox" class="fixed-box"> <p><b>固定中间某个位置</b></p> <p> 该解决方案完美实现了 position:fixed 效果,完美支持 ie5.5+, firefox, opera, chrome等主流浏览器。 </p> </div> <div id="bottomBox" class="fixed-box"> <p><b>固定在底部</b></p> <p> 该解决方案完美实现了 position:fixed 效果,完美支持 ie5.5+, firefox, opera, chrome等主流浏览器。 </p> </div> </body> </html>
相关文章推荐
- 【转载】二十款好看的css字体样式
- 超简洁的CSS下拉菜单
- js获取css值的方法:style、getComputedStyle和currentStyle
- CSS 选择器
- 我应该使用哪种wsdl样式?
- CSS 概述
- css和js结局背景图自适应游览器大小
- getStyle(),修改样式属性
- css3 text-shadow
- 父窗口采用js控制iframe页面样式
- Html-Css-设置DIV边框圆滑
- 关于更改ListBox的ItemsPanel样式
- CSS: Float a div on another div, Ex: Text caption on picture
- css3 animation实现风车转动
- css绘制三角形方法
- 表格样式
- CSS3 transition transform
- CSS 背景图随div大小缩放 兼容IE
- CSS 判断IE并执行样式
- CSS + ul li 横向排列的方法