您当前的位置: 首页 > 前端教程 > CSS教程 > DIV+CSS最小高度(兼容IE6\IE7\FF)

DIV+CSS最小高度(兼容IE6\IE7\FF)

作者:xiaoxiao 来源:未知 发布时间: 2013-10-10 16:15 点击:
折腾了一上午,就是搞不定这个最小高度 min-height:的问题,因为min-height:只在IE7FF中起作用。至于这个IE6死活就是不认。而我这个页面又必需得用这个最小高度来定。 页面是二栏的左右分,左栏算是导航菜单固定不变,长约1160PX,右边是产品的详细信息且是动态的,可

DIV+CSS最小高度(兼容IE6\IE7\FF)

    折腾了一上午,就是搞不定这个最小高度 min-height:的问题,因为min-height:只在IE7FF中起作用。至于这个IE6死活就是不认。而我这个页面又必需得用这个最小高度来定。
  
  页面是二栏的左右分,左栏算是导航菜单固定不变,长约1160PX,右边是产品的详细信息且是动态的,可长可短。
  
  左右栏中间是一条1PX灰色的分隔线,就是这根分隔线倒底是定在左栏的右边框上,还是定在右栏的左边框上,问题有点头痛。因为左边定死 1160PX,右边是自由伸展。如果定在左栏上,右栏动态内容长度大于1160时这根线是不会跟着做延伸的。那好,那就定在右栏上,但如果右栏的动态内容 小于左栏1160时,这根线也是不会自动伸止1160处。麻烦了,真是左右为难。
  
  现在只有最小高度可以解决这个问题了,把右栏定一个最小高度min-height:1160px;这样左右就一样了。即使右栏动态内容不能达到 1160的长度,有了这个最小高度,右栏将始终都是以1160这个最小高度来显示,至于动态内容大于1160时,也是可以做自动延伸的。问题到了这一步, 也能用这方法解决了。
  
  但头痛的是IE6就是不认min-height:,这样定好后在IE7FF里测试是没有任何问题的。但我们现在要解决IE6的。好在IE6与 IE7不同,它可以将一个模块定死高度,当模板里内容大于这个高度时,是会自动撑开这个模块,IE7如果定死高度,内容大于高度时是会被遮住,就是不显 示。
  
  利用这一点。我们就可以在代码里设置了,具体如下:
  
  .left{float:left;width:200px;}
  
  .right{
  
  float:right;
  
  width:600px;
  
  border-left:1px solid #ccc;
  
  min-height:1116px; // IE7FF
  
  height:100%; // IE6IE7FF 这个很重要,IE6定死高度后,需要再加上这条,才能自动延伸。
  
  _height:1116px; //IE6
  
  }

分享到:
本文"DIV+CSS最小高度(兼容IE6\IE7\FF)"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(1)
100%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4