min-height最小高度的实现（兼容IE6、IE7、FF）

杨艳 · 发表于 2009-8-11 17:05:08

CSS的兼容性问题一直令CSSer头疼，最小高度min-height是一个非常有用的属性，在页面布局中的很多地方可以用到。在52CSS.com的一些实例布局中也有涉及。

　　当容器的内容较少时，能保持一个最小的高度，以免破坏了布局或UI设计效果。而当容器内的内容增加的时候，容器能够自动的伸展以适应内容的变化。
　　声明：52CSS.com原创，转载请注意出处并加上链接。

　　min-height属性并非所有浏览器都兼容，主要问题还是出现在IE6，这个不支持标准的浏览器偏偏占据很大的用户群体，虽然IE7发布很久了，IE8正式版也快发布了，但IE6依然有着众多的用户。实在让CSSer非常无奈。

　　关于可以min-height属性参考这里：http://www.52css.com/css/c_minheight.html

　　E6对于overflow的特殊实现，给我们实现min-height提供了一个思路，所以产生了以下兼容IE6、IE7、FF浏览器的min-height写法：

#mrjin {
background:#ccc;
min-height:100px;
height:auto !important;
height:100px;
overflow:visible;
}

我们查看在内容少时，它在IE6、IE7和FF下的表现：

我们查看在内容较多时，它在IE6、IE7和FF下的表现：

　　我们查看最终的运行效果，您可以编辑内容后再运行，以便查看内容少与内容多时出现的变化
Source Code to Run

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>min-height最小高度的实现（兼容IE6、IE7、FF） - www.52css.com</title>
<style type="text/css">

</style>
</head>
<body>
<div id="mrjin">
www.52CSS.com<br />
Mr.Jin<br />
CSS Web Design<br />
我爱CSS<br />
致力于web标准在中国的应用及发展<br />
Web标准化 Div+css教程
</div>
</body>
</html>

账号		自动登录	找回密码
密码			入学

min-height最小高度的实现（兼容IE6、IE7、FF）

浏览过的版块