2013年4月9日星期二

今天花费时间最长的还是div+css定位问题,页面在不同分辨率下布局显示,定位调试真的很麻烦,效率也很低。晚上回来看了几篇文章感觉又加深了这块的认识:

真正的DIV高度height自适应

IE6 IE7中,包含子容器的父容器高度自适应,有个BUG,比如说在这个例子里面,如果没用使用相关的技巧,那么就会把最后个子容器的margin-bottom:10px给忽略了。

所以这两个是个比较完美的方案。

方案一,父容器的最后放一个clear:both的子容器。

方案二,父容器的overflowheight的自动高度"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;

原理:IEHACK
对于,IE6来说,不识别:min-height,对IE7来说不识别_height。这样的话,在IE6下,把上面的CSS识别为height,有一个固定高度560px并且超出部分会自动延展。对IE7来说,把上面的CSS识别成min-height也能保证一个最小的高度560px。超出最小高度时也会自动延展。

学习:所有div的属性都定义到css的class中;div的class中可以引用多个css定义的class

heightclientHeightscrollHeightoffsetHeight区别

height :其实Height高度跟其他的高度有点不一样,javascript中它是属于对象的style对象属性中的一个成员,它的值是一个字符类型的,而另外三个高度的值是int类型的,它们是对象的属性.因此这样document.body.height就会提示undenifine,而必须写成document.body.style.height

clientHeight:可见区域的宽度,不包括boder的宽度,如果区域内带有滚动条,还应该减去横向滚动条不可用的高度,正常的是17px,其实就是滚动条的可滚动的部分了,其实clientHeightheight的高度差不多,如果不带滚动条的话他们的值都是一样的,如果带有滚动条的话就会比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,其他的均一样.

嘿嘿,综上所述,clientHeightheight的区别是如果有滚动条时应减去滚动条的17px不可用部分,offsetHeightHeight的区别是增加了boder的高度,ScrollHeihgtHeight的区别是火狐下与offsetHeight一致,IE下如上所述.

CSS之expression

IE5及其后续的版本支持css中的expression,expression 可以在css中调用Javascript 表达式. 最简单的应用,例如在设置高度为整个页面的高度:

例二:利用简单的表达式将屏幕高度控制到725

Css代码

  1. #container {
  2. width: expression((documentElement.clientWidth > 725) ? "725px" : "auto" );
  3. }

#container {

 width: expression((documentElement.clientWidth > 725) ? "725px" : "auto" ); 

} 

expression的作用就是能够调用javascript的一些方法和参数来动态的给CSS的属性赋值,用起来是比较方便的,实现了CSS主动与javascript的互联,以往一直是在JS中通过this.style.XXX="" 来改变CSS的属性。

 

posted on 2013-04-09 22:59  时间朋友  阅读(185)  评论(0编辑  收藏  举报

导航