zoukankan      html  css  js  c++  java
  • [转]怎样调整CSS设置DIV图层自适应高度且最小高度

    网站设计师在使用DIV+CSS制作页面的时候,最头痛的就是DIV+CSS的兼容性问题,今天本文来谈下DIV高度的问题,让这个DIV的高度随内容自动变化(自适应),但是如果内容很少时,又想让这个DIV的高度保持一个固定的最小值,那么怎样调整CSS设置DIV图层自适应高度且最小高度呢?

        稍有些设计经验的朋友都知道,DIV图层在 IE7、IE8、Firefox、Opera 和 chrome 中不设置高度(或者 height:auto )的情况下,其高度是自适应的,但如果设了高度,超出部分会自动隐藏,既(overflow:hidden),但是 IE6 这小子可不吃这一套,即使设置了高度,内容超过它的高度时也会自动被撑开。

    现在,我们假设这个div的高度是300像素,对于这种情况,我们可以使用:

    .mydiv {
        height:auto !important;
        height:300px;
        min-height:300px
    }

        操作详解:IE6识别不了 height:auto !important 和 min-height:300px,因此它的高度是300px,前面说过,IE6内容超出时DIV图层的高度会随着内容的高度页变(自适应),IE7、Firefox、Opera、Chrome 可以识别 height:auto !important ,注意这个!important 关健字在 CSS 中的优先性是大于后面的 height:240px 的,因此它的渲染结果中只接受了 height:auto !important 和 min-height:300px ,这一句就可以理解为 height:auto, min-height:300px ,是不是不方便,这样提到的DIV图层自适应高度且最小高度的问题就迎刃而解了。

    版权声明:此文章为厂商在线—软件直销网(www.soft568.com)原创,如需转载请保留此链接,并勿随意改动文章内容!

    作者:深潭
    出处:http://www.cnblogs.com/dbasys/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    JS 笔记
    html笔记 横向两列布局
    jsp HTTP Status 405
    有效范围为request的bean
    jsp:session对象存储数据
    sql笔记
    StringBuffer的用法
    VB学习笔记
    html 笔记
    Linux 笔记
  • 原文地址:https://www.cnblogs.com/dbasys/p/2802704.html
Copyright © 2011-2022 走看看