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