纯CSS实现div固定页面底部无抖动
在做一个页面效果的时候,需要这用这种代码,试试jquery实现效果不怎么理想,用css滤镜实现的话ie6里面老是抖动(你懂的!)总之效果就是不理想,网上搜索了好多 google搜索后我都翻了好几页,也试了好多,但都是不能用的,终于我快要崩溃的时候发现了这个神器,分享给大家哦!哈哈
我把代码公共出来 在IE6里面可以试下
方法一:是用css滤镜实现的 这个没有抖动
content
content
content
content
纯CSS实现div固定页面底部无抖动 -前端开发-武方博
方法二:这个没用css滤镜
在别的文章中看到,可以用position:absolute;来解决IE6的问题,不过,添加position:absolute;之后,依然没有成功。当然,最终,还是用position:absolute;来解决。只是,不一定能成功。因为,有一句非常重要的话需要理解。
fixed元素的绝对位置是相对于HTML元素来说,滚动条是body元素的。
只有记住了这句话,才知为什么position:absolute;很多地方都给出了结果,但当时并未能解决。因为html被我设置position:relative。是上面这一句启发了我,最终才能够解决这个问题。我们拉动滚动条的时候,内容都会随着窗口滚动;这时滚动的是body。如果让绝对定位的父级元素定为body,刚我们需要固定的某个模块将会固定在网页的某个位置,而不是固定在窗口的某个位置(貌似在firefox中,html与body之间的介限并不明确?)。
我们需要做的是,让body保持其原有高度,让html只有一个窗口那么高。代码我们可以这样写:
html{overflow:hidden;} // 重要!
body{height:100%;overflow:auto;}
这时,html将只有一个窗口那么高,超过的,直接hide。而body会随高度自动变化。这时,我们可以利用绝对定位来定位我们想要固定在窗口某个位置的模块。假设我们要固定的内容在右上角,代码可以这样写:
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#rightform form{position:absolute;right:30px;top50px;}
这样,窗口就固定在右上角了。而其他浏览器,我们可以用position:fixed;来解决固定的问题。其他浏览器完整的代码如下:
#rightform {text-align:center;padding:50px;font:14px/22px Georgia, “Times New Roman”, Times, serif;height:1200px;background:#ffc;}
#rightform h1 {font-family:arial;background:#e8edef;height:300px;line-height:300px;margin-bottom:200px;}
#rightform p {line-height:1.5em;background:#ffdfff;padding:90px 0;}
#rightform form {background-color:#ddd;padding:10px 20px;border:1px solid #aaa;position:fixed;right:30px;top:120px;}
问题的原理就是这么简单。不知道,你能理解不?
转载请注明:纯CSS实现div固定页面底部无抖动 - 编程知识库
上一篇:jQuery旋转木马
您可能还会对这些文章感兴趣
2016-12-15 907次CSS实现多行文本溢出显示省略号
单行文本溢出显示省略号—(前提要给固定宽度) 实现方法: overflow:hidden; /*–超出隐藏–*/ white-space:nowrap; /*–禁止换行–*/ text-overflow:ellipsis; /*–超出的文字以省略号显示–*/ 显示效果: 多行文本溢出显示...
2016-12-15 611次divcss布局左边固定右边自适应
web前端开发之布局:先看效果图,最简单的左右布局。有可能还会被面试问道哈哈哈。 一看也没什么特别之处,就是左边固定,右边自适应,就这么简单。 原理:通过设置一个margin-left;或者margin-right就可以搞定。方法有很多,这次就只介绍这种设置margin的。 <!do...
2014-12-17 2,739次css常用中文字体的英文名称写法
我们知道网页中使用中文字体最好用其对应的英文名称,这样可以避免出现编码问题导致样式中的中文名称出现乱码,从而不识别。下面是网页中常用的中文字体所对应的英文名称。留着,不用翻资料了 中文 英文 宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHe...
2014-11-21 19,362次normalize.css使用方法,normalize.css下载
Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、...
大家正在看
- linux 系统中Mysql 进程占用cpu过高的解决
- 二类电商是什么意思? 二类电商有哪些?暴利二类电商还好做吗?
- 【二类电商广点通投放指南】二类电商广点通投放值不值
- 密码保护:支付宝突破微信封锁唤起支付宝代码
- Host is not allowed to connect to this MySQL server解决方法
- 密码保护:移动端js自动复制代码
- linux数据库调优,WordPress MySQL占用cpu高数据库优化
- 2017 年十大网页设计趋势
- 网页端的VR实现离我们还远么?
- 最完整的Chrome浏览器客户端调试大全
- iPhone用户人均每天遭电话骚扰1次
- 3G电子化销售服务系统
- Java WeakReference的理解与使用
- 搞清楚 Python traceback