【CSS】设置div的最小高度（多浏览器兼容）

网页布局中会碰到需要某一个div有最小高度，超过最小高度后会自动扩展。比如某个div是有背景图的，高度小了背景图就不完整了影响效果。需要用到css中的min-height属性。

min-height属性的使用说明：

设置或检索对象的最小高度。如果此属性的值大于 max-height 属性的值，将会被自动转设为 max-height 属性的值。在IE6中这个属性仅仅作用于固定布局的表格内的 td 对象， th 对象， tr 对象。表格的默认布局是自动计算的，要得到固定布局的表格，设置表格的 table-layout 属性的值为 fixed 。固定布局的算法比默认的自动算法要快很多。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 minHeight 。

最简单的是采用以下css样式：

min-height:100px;
height:auto !important;
height:100px;

本来单用min-height就可以高度了，可是可恶的IE6不支持，于是加了后面两行来修正。

上完整的测试代码：

<!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>枫芸志 » CSS设定div最小高度</title> <style> .min-height { min-height:100px; height:auto !important; height:100px; background-color: #6699ff; width:300px; } </style> </head> <body> <div class="min-height"> <pre> line line </pre> </div> <br /> <div class="min-height"> <pre> line line line line line line line line line line line line line </pre> </div> </body> </html>

提示：你可以先修改部分代码再运行。

以上代码在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari下测试有效。

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自枫芸志，原文地址《【CSS】设置div的最小高度（多浏览器兼容）》

标签： CSS

枫芸志

枫芸志

【CSS】设置div的最小高度（多浏览器兼容）

还没有人抢沙发呢~

点击这里取消回复。