兼容浏览器的最小高度(min-height)_min-height 兼容-CSDN博客

本文链接：https://blog.csdn.net/Zerofishcoding/article/details/77979115

本文介绍了一种在IE6浏览器中解决min-height属性兼容性问题的方法，并提供了具体的CSS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：在网页设计中，常常遇到需要设置最小高度的问题。例如，设计方案中需要给一个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下显示效果如下图所示：