兼容浏览器的最小高度(min-height)

        前言：在网页设计中，常常遇到需要设置最小高度的问题。例如，设计方案中需要给一个div设置一个背景图，而该div并不限定具体宽高值，其内部内容无法撑开背景图完全显示所需要的高度，此时便需要设置最小高度。即当div内的内容无法撑开父级高度时，会有一个最小高度保证父级背景显示完全，而当内容高度大于最小高度时，该div的高度就会完全由内容撑开。这里边要用到css的一个属性，即min-height。

        但是一般好用的东西都存在兼容性问题，min-height存在一个兼容性问题-不兼容IE6。代码演示如下：

        html代码：

                <div class="box"><h1>测试min-height兼容性</h1></div>

       css代码：

                      body,h1{margin:0;}.box{min-height:775px;background:url(../min-hight.jpg) no-repeat 0 0;}h1{font:14px/7 "微软雅黑";color:#000;}

     

         其中背景图片是在百度上随便下载的一张1024*775的图片。代码演示结果在Chrome下显示如下：

     

         其在ie6（使用ietest进行模拟）下显示效果如下：

   

     在ie6设置最小高度，需要对div的css代码做如下修改：

                    .box{min-height:775px;height:775px;height:auto !important;background:url(../min-hight.jpg) no-repeat 0 0;}

      在ie6下，限定高度为775px，当内容高度大于775px时，便会由内容撑开。设置height：auto!important；是为了在除ie以外的浏览器中，覆盖height：775px这个样式。！important所在css样式会比其他css样式优先级最高。但也需要注意！important的合理使用，特别是在协作开发的时候，需谨慎。

     改进代码后，在ie6下显示效果如下图所示：