IE6下绝对定位的高度自适应

　　样式类似于聊天工具的resize,缩放窗口时消息区高度变化，其它元素高度不变，在chrome、FireFox下表现很好做，但IE6下不正常，消息区高度不能自适应变化。

　　如下图，正常的情况和IE6下不正常的情况(灰色区是消息区),IE6下高度不是自动填充;

　　代码：　　

<div id="dialog_chatting" class="dialog_chatting"  style="display:none;"><div class="chatPanel"><div class="revPanel">                    </div><div class="sendPanel"><textarea class="txtReply"></textarea><button class="btChat">发送</button>  </div>   </div>     </div>

　　样式：

.chatPanel {height:100%; width:100%;_height:100%; _width:100%;position:relative; }
.revPanel { position:absolute; top:0; left:0; bottom:100px; right:0;width:100%;_width:100%; overflow-y:auto;word-break:break-all; background-color:#ccc;_height:expression( (this.parentElement.clientHeight -100) +'px');}
.sendPanel {position:absolute; bottom:0; left:0; right:0; padding-top:4px; height:96px;_height:96px;  width:100%;}

解决IE的bug办法就是这一句：　　

_height:expression( (this.parentElement.clientHeight -100) +'px');

网上找了很多方法，测试了下，只有这种方法可行，虽说expression性能不好，不过兼容了IE6，也是是比较完美的方案

最后IE6下的正常样式:

转载于:https://www.cnblogs.com/ninestates/archive/2012/08/27/2658246.html

IE6下绝对定位的高度自适应相关推荐

IE6下绝对定位的DIV被相对定位的DIV挡住的问题
http://blog.sina.com.cn/s/blog_4be6505c0101cicr.html 今天在做项目的时候,遇到了一个问题,在一个div中,有个绝对的div,不论这个绝对定位的div ...
body下的DIV 高度自适应
html页面body标签下的DIV标签高度自适应,或者高度100%设置: 通常情况下 <div style="height:100%"></div> 即可将 ...
ie6下常见的bug 调整页面兼容性
ie6下常见的bug 我们布局页面,首先符合标准,如何写一个页面的标准性? 但是ie6等浏览器本身就比较特殊,bug比较多,兵法云,知己知彼百战百胜.我们需要了解ie6的一些常见bug,这样,更好的调 ...
CSS在IE6下的一些BUG和兼容性问题及解决办法
兼容性一直是前端的一大问题,也是让前端工程师很头痛的事情,在浏览器中,各厂商都有一套属于自己的标准和方法,从某种程度上看,是否能很好的处理兼容性问题,体现着一个前端工程师的水平,下面看一下CSS在IE ...
IE6下css常见bug处理
1.双倍边距如下图所示,一个样式里面既设定了"float:left:"又有"margin-left:100px:"的情况,就呈现了双倍情况.如外边距设置为10 ...
IE6 下div高度显示的问题
IE6下默认的字体尺寸大致在 12 - 14px 之间,当你试图定义一个高度小于这个默认值的 div 的时候, IE 会固执的认为这个层的高度不应该小于字体的行高.所以即使你用 height: 6px ...
iframe高度自适应（IE6+、FF、Opera、Chrome等测试通过）
在主页面中对于嵌入的iframe页面高度未知,而且iframe页面的高度也不定,故不能在主页面中通过DOM来控制高度.在iframe页面中加入以下脚本便可实现: /* iframe 高度自适应脚本(I ...
[小黄书小程序]主页面笔记图片高度自适应及上拉无限加载及下拉更新
上一章我们实现了小黄书小程序标签栏的左右滑动和弹出框UI功能,今天我们会开始实现主页面中笔记的呈现. 主要的功能会囊括以下几个方面: 笔记的两列式布局: 一行只是显示两个笔记.且每个笔记的封面图片的高 ...
div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com 本文地址: http://www.zhangxinxu.com/wordpress/?p=1362 一.关于t ...

IE6下绝对定位的高度自适应

IE6下绝对定位的高度自适应相关推荐

最新文章

热门文章