网上有相关的文章,但是都没有说思想。之前只是有这个认识,但是没有亲自写过类似的东西,这回做了一个这样类似的东西。发现一个道理就是:只看不做,终无成也。
经过自己的尝试,发现需要两个前提:
1、高度自适应的这个元素,假设为A,它必须要有一个或多个它的兄弟元素(节点),假设为B;
2、Height(B) > Height(A)。
如果不符合上面的条件的话就没必要做自适应了。
需要做的有两点:
1、对A的父级元素(节点),假设为C,设置:overflow-y: hidden; //隐藏掉有可能超出的部分
2、对A元素设置:margin-bottom: -2000px; padding-bottom: 2000px; //可以看出按照盒模式的计算方式,就刚好相互抵消了。
这样就可以看出效果了。
不过我发现了一个问题:
1、IE6下,我采用的是margin-left:-100%进行布局,发现使用这个属性后,定位错误,跑出了屏幕。修正为:_margin-left: -xxxpx; //xxx为主内容的宽度
具体的参考:http://www.positioniseverything.net/articles/onetruelayout/equalheight 或google:css自适应高度