• div控制最小高度又自适高度


    div控制最小高度又自适高度
    我们在用div布局的时候经常会遇到这样的一种情况:我们需要设置一个div的高度,当里面的东西超过这个高度时,让这个容器自动被撑开,也就是自适应高度。当里面的信息很少时候,我们就设置它一个最小的固定高度。

    我们知道,在ie6中,如果子容器的高度超过父容器的时候,父容器会被子容器撑开,所以我们可以直接设置一个height的高度值即可。 但是在ie7和firefox就不行了,它不会自动撑开。

    如果要设置自适应高度,我们可以采用height:auto;这个属性;不过这个属性ie6又不支持了。是不是很头痛?其实解决这个问题不难,而且方法也不少,这里推荐一种:(假设我们需要控制的这个div的最小高度是100px,超过时就让里面的信息自动撑开):

    .div{

    height:auto !important;

    height:100px;

    min-height:100px

    }

    注释:因为 !important在ie7和ff都可以读到,而且权重高于后面的height:100px;所以当在ie7和ff显示的时候,就会用了前面的height:auto !important;而ie6识别不了!important,auto对它也不管用,因此会应用了后面的height:100px的样式;而min-height:100px表示最小高度为100px;此属性在ie7和firefox都可以识别。

    这样一个完美的即可以设置最小高度,有可以自适应高度的css样式就出来了,同时兼容了ie6、ie7和firefox!

    折腾了一上午,就是搞不定这个最小高度 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;200px;}

     
    .right{

    float:right;

    600px;

    border-left:1px solid #ccc;

    min-height:1116px;//IE7FF

    height:100%;//IE6IE7FF 这个很重要,IE6定死高度后,需要再加上这条,才能自动延伸。

    _height:1116px;//IE6

    }

     
    就这样,问题都解决了。

  • 相关阅读:
    golang 识别redis key在哪个codis的slot上
    QAT SSL加速卡安装及使用
    dereferencing pointer to incomplete type错误的解决办法
    golang topN算法
    golang日志框架zap简洁配置
    golang 读取文件
    Django学习目录
    go练习:循环与函数
    全站搜索实战应用(Lucene.Net+盘古分词)
    (原创)将Datatable数据按照Excel模板格式导出
  • 原文地址:https://www.cnblogs.com/dingyufenglian/p/3613978.html
Copyright © 2020-2023  润新知