- 浏览: 1434485 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
常见的
html, body {
height: 100%;
}
解释
这是为了兼容各个浏览器。
IE 处于混杂模式时,body以窗口为高度参照,body设置为100%就可以使得页面和窗口一样高,body里面的嵌套div也可以扩展到窗口高度,这样的话可以使布局适应浏览器窗口大小。
窗体 》body》div (html ,body {overflow:scroll} 一层滚动条)
但是当处于标准模式时,body以html标签为高度参照,html标签才以窗口为参照,所以仅仅body 100%,并不能使它的子div100% 占据整个屏幕,还要使得 html 100%使得 html获得窗口大小才行。才有了上述代码。
窗体》html》body》div
(html ,body {overflow:scroll} 两层滚动条 ,html的滚动条从来不会用到)
使用后问题:
(090624 From http://log.7thpark.com/article/W3C-and-Front-End-Development/html-body-style-height-100percent.html)
1.清楚浮动失效,一般在遇到这种代码时候 <div id="main"><div id="sidebar">side</div> <div id="content">content</div></div> 控制sidebar浮左,content浮右以后,需要清楚一下浮动,有很多种方法,例如在main最后插入一个clear:both的div或用纯css方法,但是当设置了html,body{height:100%}的时候会发现失效了;
2.仍然会出现处置滚动条,这是因为某些元素设置的margin及padding混乱造成的,所以当一个页面可能超过一屏的时候最好不要用这个属性
|
当body中子100%div的内容过多时,兼容标准的浏览器会 出现 : 内容透了出来覆盖该div后面内容上面,body上面出现滚动条。
而ie6 则会自动扩展100%div的高度到适应高度大小。
要解决这个问题:则要利用 兼容标准浏览器的 Min-height css 属性了。
示例代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> *{margin:0;padding:0;} html,body {height:100%;} #wrapper{height:100%;background:#369;} body>#wrapper{height:auto;min-height:100%;} /*设定最小高度*/ </style> </head> <body> <div id="wrapper"> <h1><a href="#">很长</a></h1> <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> <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> 我是尾巴 </div> </body> </html>
应用2:position : fixed 的 IE6 (标准模式下) 实现、
由于 css , position:fixed 这个特性 IE6 不支持,而我们 需要某个东西定位到窗口某个位置,而它不随浏览器滚动条的拖动而影响。
现在存在两个方法:
1. javascript
监控 window 的 scroll 事件 ,将定位为 absolute 的 top 动态改变为 : document.documentElement.scrollTop + x
以及和此方法类似的 css expression 方法。(这时,效率很成问题,注意:expression每次界面渲染都会执行的 )
缺点:定位元素拖动时会有闪动的效果
优点:不改动现有css布局
2.css 方法 (其他浏览器这样用也能达到同样效果)
主要就是利用 absolute 定位 以 html 为 准 ,body属于 html的子容器,我们需要滚动条出现在 body 上,而不是html上,这样才能 以html绝对定位 到某一位置,拖动 body的滚动条时不会影响 以html定位的元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> *{margin:0;padding:0;} html,body {height:100%;overflow:hidden;} body {overflow:auto;}; </style> </head> <body> <div id="wrapper"> <h1><a href="#">很长</a></h1> <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> <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 style="position:absolute;bottom:0;border:2px green solid;"> 我是尾巴 </div> </body> </html>
优点:拖动滚动条是不会有闪动
缺点:以后所有以html绝对定位的元素都变成fixed 效果了。
发表评论
-
cubic-bezier 模拟实现
2013-01-05 16:34 14017cubic-bezier 曲线是 css3 动画的一个重要基石 ... -
css reset revisit
2012-07-25 00:32 4162正如 javascript 兼容库的作用, css r ... -
兼容 ie 的 transform
2012-02-23 14:00 6341css 2d transform 是 css3 引入的一个新的 ... -
write html parser
2011-12-01 02:48 2852首先需要声明 html 不能用正则表达式来直接匹配进行内容抽取 ... -
转载:瀑布流布局浅析
2011-09-29 19:02 2790简介 如果你经 ... -
fixed 定位 auto 问题
2010-12-02 11:58 2045当一个元素被 fixed 定位 ... -
css的优先级与继承
2010-11-08 12:30 3653起因: 很早就听 ... -
浏览器渲染
2010-10-12 21:07 0http://snook.ca/archives/html_a ... -
背景图样式回顾
2010-09-30 13:51 1748正式点叫 background-image recap ,最近 ... -
mhtml datauri 与 css expression
2010-09-29 18:17 2357mhtml ,datauri ,css expressio ... -
margin合并整理
2010-06-23 11:25 4149多个段落为了美观,浏览器会将它们的垂直距离变得统一,这是一种很 ... -
编写跨浏览器兼容的 CSS 代码的金科玉律
2010-06-09 13:26 0作为 Web 设计师,你的 ... -
图片优化 and dataURI and mhtml for ie<8
2010-04-28 10:00 0http://www.phpied.com/data-uris ... -
W3C XML Schema 与文档类型定义 (DTD) 比较
2010-02-01 23:50 0http://www.ibm.com/developerwor ... -
xtml与html
2010-02-01 23:26 0HTML与XHTML 二者有什么区别,你觉得 ... -
获取css属性计算值问题
2010-01-29 23:11 3747都知道标准浏览器可以用 getComputedStyle 以及 ... -
垂直居中问题解释整理
2009-12-06 01:19 2244垂直居中曾经很热的话题,也转过网络一些好的解决方案: ... -
有趣的z-index
2009-12-01 00:25 2799实践 : 注:firefox 示例1 ... -
css列布局整理
2009-11-27 01:14 1652对一些经典的布局进行整理,以及修改去除不必要的hack,兼容 ... -
ebay ppt.rar
2009-11-18 15:23 0ebay ppt.rar
相关推荐
我HTML 快速HTML5解析器(用于lexborisov的和水晶绑定)。 生产中使用的此分片每天稳定地解析数百万页,非常稳定且快速。安装将此添加到应用程序的shard.yml : dependencies : myhtml : github : kostya/myhtml 并...
邮件正文解析器从单部分和多部分电子邮件正文中提取和解码消息内容的库。概述在Internet上旅行时,电子邮件消息以人类不可读的方式进行编码。 另外,消息可以包括相同内容的几种替代格式(例如纯文本和html)。 mail...
node-html-pdf-sample 使用名为“ node-html-pdf”... npm install-保存nunjucks安装$ npm install --save express$ npm install --save body-parser$ npm install --save html-pdf (main node-html-pdf npm command)$
Samurai-Native 是一个基于浏览器...相关项目:gumbo: HTML5 解析库,纯 C99 实现katana: CSS3 解析库,纯 C99 实现fishhook: iOS 上支持动态重新绑定符号AFNetworking: iOS 和 OS X 的网络框架 标签:Samurai
驯鹿 :red_heart: 支持我的应用 :red_heart: :red_heart: :red_heart: :smiling_face_with_halo: :smiling_face_with_heart-eyes: :sign_of_the_horns: :red_heart: :red_heart:描述使用libxml2 基于 在用法XML,SVG...
将Apache的commons-fileupload.jar放在应用程序的WEB-INF\lib下,即可使用。下面举例介绍如何使用它的文件上传功能。 所使用的fileUpload版本为1.2,环境为Eclipse3.3+MyEclipse6.0。FileUpload 是基于 Commons IO的...
在网页中,我们可以将JavaScript代码放在html文件中任何位置,但一般放在head或body标签里面。 一般来说,[removed]元素放在哪里与其的功能作用是紧密相关的,在这里讨论2种情况: 1、放在<head>里 将...
引用类型和原始类型具有不同的特征和用法,它们包括:大小和速度问题,这种类型以哪种类型的数据结构存储,当引用类型和原始类型用作某个类的实例数据时所指定的缺省值。对象引用实例变量的缺省值为 null,而原始...
可配置,可扩展的词条规范化解析和处理 易于集成,无外部依赖包,压缩后只有 100k 注意,fullproof 不是一个文档管理系统,只是为你的应用提供全文搜索,并不是为了存储文档或者数据。 一些示例应用的屏幕...
NPM: npm init -y 表示: npm i express 人体解析器: npm i body-parser EJS: npm i ejs 猫鼬: npm i mongoose 加密: npm i bcrypt 本地访问应用程序: localhost:3000 项目截图注册页面输入验证登录页面
HttpClient已经应用在很多的项目中,比如Apache Jakarta上很著名的另外两个开源项目Cactus和HTMLUnit都使用了HttpClient。 下载地址: http://hc.apache.org/downloads.cgi 1.2特性 1. 基于标准、纯净的java语言。...
html的body内标签之fieldset标签和label标签 上述内容总结 css选择器 css的存在形式及优先级 css边框以及其他常用样式 css之float样式 css之float实现作业实例 css之display样式 css之内外边距 本周作业以及思路 第...
Services(服务器应用程序,Web Server 通常是C/C++/Java写的)、服务器脚本 PHP ,服务器脚本,Web Framework(服务器脚本框架) 一个普通网站访问的过程: 用户操作浏览器访问,浏览器向服务器发出一个 HTTP 请求...
本文分享一个能够实现自动切换的选项卡功能,并给出它的具体实现过程。 关于选项卡大家一定不会陌生,应用非常的频繁,通常选项卡都是需要点击或者划过才能够实现切换。 代码实例如下: ...body{font-size:1
这个示例会用到Cookie、HTML表单、POST数据体(body)解析。 第一个版本,我们的用户数据就写死在js文件里。第二个版本会引入MongoDB来保存用户数据。 示例准备 1. 使用express创建应用 就下面的命令序列: express ...
JSON 解析器 47 XQuery 教程 48 XQuery 参考手册 48 内容目录 48 XQuery 简介 49 您应该具备的基础知识: 49 什么是 XQuery? 49 XQuery 和 XML 查询有关 50 XQuery 与 XPath 50 XQuery - 应用举例 50 XQuery 是一个 ...
针对不同的行业和应用,这些DTD文件已经建立了通用的元素和标签规则。你不需要自己重新创建,只要在他们的基础上加入你需要的新标识。 当然,如果愿意,你可以创建自己的DTD,它可能和你的文档配合的更加完美。建立...
当我为 API 编写测试并使用 RSpec 进行调试时,我讨厌尝试用眼睛解析response.body ,如果有 500 或者你有什么。 所以这会打开一个带有格式化 HTML 的浏览器安装将此行添加到应用程序的 Gemfile 中: gem 'browser-...
然后应用泛函微分方程Hopf 分支理论和中心流形等非线性方法给出了该模型稳定 性和分支的解析分析, 得到了由时滞引起的Hopf 分支存在条件、分支点计算公式以及分支周期解的稳定性判别准 则; 最后利用所得结论...