2013年4月9日星期二
今天花费时间最长的还是div+css定位问题，页面在不同分辨率下布局显示，定位调试真的很麻烦，效率也很低。晚上回来看了几篇文章感觉又加深了这块的认识：
真正的DIV高度height自适应
IE6 和IE7中，包含子容器的父容器高度自适应，有个BUG，比如说在这个例子里面，如果没用使用相关的技巧，那么就会把最后个子容器的margin-bottom:10px给忽略了。
所以这两个是个比较完美的方案。
方案一，父容器的最后放一个clear:both的子容器。
方案二，父容器的overflow和height的自动高度"auto"。
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div自动高度</title>
<style type="text/css">
<!--
.line{ border: 1px dashed #333;}
.con {margin:auto; background-color:#FFFFCC;}
.top{ height:200px; width:80%; background-color:#eee; margin:0 auto 10px auto;}
.cl{ clear:both;}
.con1 { overflow:auto; height:auto;margin:auto; background-color:#FFFFCC;}
.top1{ height:200px; width:80%; background-color:#eee; margin:0 auto;}
-->
</style>
</head>
<body>
<h4>利用clear自动高度，因为TOP层有下边界</h4>
<div class="con line">
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="cl"></div>
</div>
<h4>利用overflow和高度的自动高度实现，无下边界的情况</h4>
<div class="con1 line">
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
</div>
</body>
</html>
另外和这个高度自适应的相关的还有两点：
1、使用 expression 实现动态属性设置:
height: expression(this.style.height>=this.scrollHeight?'176px':this.scrollHeight+'px');
以上代码解释是超过了176px就自动延伸,否则定义为176px.
2、结合min-height和高度自适应。
主要代码如下：
min-height:560px;
_height: 560px;
原理：IE的HACK。
对于，IE6来说，不识别：min-height，对IE7来说不识别_height。这样的话，在IE6下，把上面的CSS识别为height，有一个固定高度560px并且超出部分会自动延展。对IE7来说，把上面的CSS识别成min-height也能保证一个最小的高度560px。超出最小高度时也会自动延展。
学习：所有div的属性都定义到css的class中；div的class中可以引用多个css定义的class
height、clientHeight、scrollHeight、offsetHeight区别
height :其实Height高度跟其他的高度有点不一样,在javascript中它是属于对象的style对象属性中的一个成员,它的值是一个字符类型的,而另外三个高度的值是int类型的,它们是对象的属性.因此这样document.body.height就会提示undenifine,而必须写成document.body.style.height
clientHeight:可见区域的宽度,不包括boder的宽度,如果区域内带有滚动条,还应该减去横向滚动条不可用的高度,正常的是17px,其实就是滚动条的可滚动的部分了,其实clientHeight与height的高度差不多,如果不带滚动条的话他们的值都是一样的,如果带有滚动条的话就会比height值少17px;火狐与IE下均为一致.
scrollHeight:这个属性就比较麻烦了,因为它们在火狐跟IE下简直差太多了..
在火狐下还很好理解,它其实就是滚动条可滚动的部分还要加上boder的高度还要加上横向滚动条不可用的高度,与clientHeight比起来,多个border的高度跟横向滚动条不可用的高度.
在IE中 scrollHeight确是指这个对象它所包含的对象的高度加上boder的高度和marging,如果它里面没有包含对象或者这个对象的高度值未设置,那么它的值将为15
offsetHeight:这个属性好办,因为在测试中IE跟火狐的结果是一样的,均表示是自身的高度,如果有设置boder的话还应该加上boder的值,因为除了test4这个div外,其他的div均有设置border=1px,所以552=550+2,其他的均一样.
嘿嘿,综上所述,clientHeight与height的区别是如果有滚动条时应减去滚动条的17px不可用部分,offsetHeight与Height的区别是增加了boder的高度,ScrollHeihgt与Height的区别是火狐下与offsetHeight一致,IE下如上所述.
CSS之expression
IE5及其后续的版本支持css中的expression,expression 可以在css中调用Javascript 表达式. 最简单的应用,例如在设置高度为整个页面的高度:
例二:利用简单的表达式将屏幕高度控制到725
- #container {
- width: expression((documentElement.clientWidth > 725) ? "725px" : "auto" );
- }
#container {
width: expression((documentElement.clientWidth > 725) ? "725px" : "auto" );
}
expression的作用就是能够调用javascript的一些方法和参数来动态的给CSS的属性赋值，用起来是比较方便的，实现了CSS主动与javascript的互联，以往一直是在JS中通过this.style.XXX="" 来改变CSS的属性。