[转]怎样调整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）原创，如需转载请保留此链接，并勿随意改动文章内容！

转载于:https://www.cnblogs.com/dbasys/archive/2012/12/05/2802704.html