客服热线:189-2701-5231
登录注册

CSS控制最小高度(兼容IE6\IE7\FF)

发布日期:2013-06-24

最小高度是一个比较适用的属性,当一个些内容不完整时,用这个属性非常有用,它可以使一个页面比较完整的显示,有利于用户的体验,但是万恶的ie6又不兼容此属性,在网上也没查到好的方法,折腾了一上午,就是搞不定这个最小高度 min-height:的问题。例如以下:
页面是二栏的左右分,左栏算是导航菜单固定不变,长约1160PX,右边是产品的详细信息且是动态的,可长可短。
左右栏中间是一条1PX灰色的分隔线,就是这根分隔线倒底是定在左栏的右边框上,还是定在右栏的左边框上,问题有点头痛。因为左边定死 1160PX,右边是自由伸展。如果定在左栏上,右栏动态内容长度大于1160时这根线是不会跟着做延伸的。那好,那就定在右栏上,但如果右栏的动态内容 小于左栏1160时,这根线也是不会自动伸止1160处。麻烦了,真是左右为难。
现在只有最小高度可以解决这个问题了,把右栏定一个最小高度min-height:1160px;这样左右就一样了。即使右栏动态内容不能达到 1160的长度,有了这个最小高度,右栏将始终都是以1160这个最小高度来显示,至于动态内容大于1160时,也是可以做自动延伸的。问题到了这一步, 也能用这方法解决了。

但头痛的是IE6就是不认min-height:,这样定好后在IE7\FF里测试是没有任何问题的。但我们现在要解决IE6的。好在IE6与 IE7不同,它可以将一个模块定死高度,当模板里内容大于这个高度时,是会自动撑开这个模块,IE7如果定死高度,内容大于高度时是会被遮住,就是不显 示。
利用这一点。我们就可以在代码里设置了,具体如下:
.left{float:left;width:200px;}

.right{
float:right;
width:600px;
border-left:1px solid #ccc;
min-height:1116px;//IE7\FF
height:100%;//IE6\IE7\FF 这个很重要,IE6定死高度后,需要再加上这条,才能自动延伸。
_height:1116px;//IE6
}
大致就是这样,如果您还有更多的兼容方法,欢迎留言分享^_^

工作时间:早9:00—晚上21:00   24H售后:13829351575  服务QQ:292480793  392478192  售后技术QQ:156461982
地址:广东河源市龙川新城开发区5号小区 龙川商耀网络科技有限公司 备案号:粤ICP备15012952号-1
Copyright © 2005-2015 (www.shopsy.cn) All Rights Reserved
在线时间
9:00-22:00