html body 100% 解析和应用

yiminghe

浏览: 1465642 次
性别:
来自: 上海

最近访客更多访客>>

akingde

xmg25

xiaolan02

archerfrank

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

xhtml / css

HTML CSS 浏览器 IE JavaScript

常见的

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 效果了。

分享到：

Ext.Element.setXY 使用注意 bug in IE ？ | Arrays.binarySearch 的javascript实现

2009-06-22 21:31
浏览 24920
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论