IE6 CSS高度height:100% 无效解决方法总结

原文地址：http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html

上面红色部分为 height:100%; 自动拉伸到与父元素一样的高度。
在IE7 8 FF 等浏览器中通过position:absolute;可以使height:100%;正常显示，IE6下无效。
方法一：
使用CSS嵌入JS来实现。

_height:expression(document.getElementById('div2').offsetHeight+"px");

这句CSS只针对IE6有效。
测试:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style>
#box{position:relative;
border:1px solid #CCC;
width:180px;
}#div1{position:absolute;top:0;right:0;
width:100px;
border-left:1px solid #CCC;
background:red;
float:right;
height:100%;
_height:expression(document.getElementById('div2').offsetHeight+"px");
}
</style>
</head>
<body><div id="box">
<div id="div1"></div>
<div id="div2">
1111<br/>
1111<br/>
1111<br/>
1111<br/>
1111<br/>
1111<br/>
</div>
</div></body>
</html>

方法二：
去掉HTML第一行的<!doctype> 声明，并且给父容器指定height属性。
测试:

<!--<!doctype html> 删掉这句-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style>
#box{position:relative;
border:1px solid #CCC;
width:180px;
height:150px;/* 给父元素指定height值 */
}#div1{position:absolute;top:0;right:0;
width:100px;
border-left:1px solid #CCC;
background:red;
float:right;
height:100%;
/*_height:expression(document.getElementById('div2').offsetHeight+"px");*/
}
</style>
</head>
<body><div id="box">
<div id="div1"></div>
<div id="div2">
1111<br/>
1111<br/>
1111<br/>
1111<br/>
1111<br/>
1111<br/>
</div>
</div></body>
</html>

转载于:https://www.cnblogs.com/sunnywindycloudy/p/7382449.html

IE6 CSS高度height:100% 无效解决方法总结相关推荐

css 高度塌陷和BFC,解决方法
高度塌陷问题: 在浮动布局中,父元素的高度默认是被子元素撑开的. 子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离. 将会无法撑起父元素的高度,导致父元素的高度丢失父元素高度丢失后,其下方的元 ...
CSS子元素撑满父元素（height: 100%无效）
原因分析明确一点:子元素设置height: 100%需要父元素有确定的高度: 如果父元素高度是被子元素②撑起来的,此时我们想让子元素①撑满高度,height: 100%无效. 解决办法父元素: p ...
解决css中height:100%失效的问题
解决css中height:100%失效的问题参考文章: (1)解决css中height:100%失效的问题 (2)https://www.cnblogs.com/wangweizhang/p/111 ...
HTML文本错位,DIV+CSS网页错位诊断和解决方法
你地DIV+CSS网页错位的概念是否了解,这里和大家分享一下常见DIV+CSS网页错位问题及解决方法,希望对你的学习有所帮助. DIV+CSS网页错位诊断随着WEB2.0标准化设计理念的普及,国内很 ...
[css] css的height:100%和height:inherit之间有什么区别呢？
[css] css的height:100%和height:inherit之间有什么区别呢? 上周在微博上无节操吐槽了下inherit的段子,没想到回声还不少: 微博inherit无节操段子不过inh ...
html如何设定盒子的高,css 高度height设置
css height[css 高度]教程 height翻译成中文也是高.高度意思.在CSS样式中高度样式设置也是height来布局.几乎每个网页布局都会用到css高度height样式,特别是布局局部时 ...
html使用div显示会错位,DIV+CSS网页错位诊断和解决方法
你地DIV+CSS网页错位的概念是否了解,这里和大家分享一下常见DIV+CSS网页错位问题及解决方法,希望对你的学习有所帮助. DIV+CSS网页错位诊断随着WEB2.0标准化设计理念的普及,国内很 ...
安卓 android:windowsoftinputmode,Android:windowSoftInputMode=＂adjustResize＂无效解决方法
Android:windowSoftInputMode=＂adjustResize＂无效解决方法时间:2018-08-16 来源:未知 Android开发中用到软键盘时会出现设置Activi ...
Better Scroll+Vue、div的@click无效解决方法
better-scroll+Vue.div的@click无效解决方法正常情况,div可以直接点击 <template><div><div @click="di ...
ubuntu (20.04 LTS) 屏幕亮度调节无效解决方法
ubuntu屏幕亮度调节无效解决方法问题描述尝试过的解决方法解决方法发现历程解决方法总结问题描述因为学习需要,在Win10系统的基础上安装了Ubuntu20.04 LTS 双系统,但 ...

IE6 CSS高度height:100% 无效解决方法总结

IE6 CSS高度height:100% 无效解决方法总结相关推荐

最新文章

热门文章