min-height 的原始实现方式

看到sam关于max-height的文章，觉得按捺不住了。sam注重于样式表的写法，过多的要求div+css的布局，sam可是追求艺术的人哦，我嘛，没什么艺术细胞，做事情更偏重于结果，下面我就分享下我的一点点心得体会。

先忘掉div，我们想想我们曾经熟练使用的table，当给td定义height=300px后，td里的内容如果高度超过300px，在不同浏览器里table都会自动伸展，这不就是最好的min-height实现吗？

当然代码要这样写：测试请改变 id=”tt” 层的height值

<div style=”border:1px solid black;”><table width=500px cellspacing=0 cellpadding=0 border=0><tr> <td height=”200px” valign=”top”>  <div id=”tt” style=”height:500px;background:red;”></div> </td></tr></table></div><div style=”background:green;height:60px;”></div>

在上文的基础上增加 min-width 效果

测试请改变 id="tt" 层的 height 和 width 值

<div style="border:1px solid black;float:left;"><table cellspacing=0 cellpadding=0 border=0><tr><td height="200px" width="200px" valign="top"><div id="tt" style="width:300px;height:300px;background:red;"></div></td></tr></table></div><div style="width:100px;background:green;height:60px;float:left;"></div><div style="background:green;height:60px;clear:both;"></div>

max-height 在 IE6.0 的实现稍微复杂点。具体思想，想办法获得可变层的高，宽，样式中使用expression()得到外层的高，宽。

代码如下：测试请改变 id=”tt” 层的 height 和 width 值
<style type="text/css">#bb {max-width:200px;max-height:200px;width:expression( document.getElementById("fr").offsetWidth > 200 ? "200px": "auto" );height:expression( document.getElementById("fr").offsetHeight > 200 ? "200px": "auto" );float:left;overflow:hidden;}</style><div id="bb"><span id="fr"><div id="tt" style="width:510px;height:510px;background:red;"></div></span></div><div style="width:120px;height:100px;float:left;background:green;"></div><div style="height:200px;clear:both;background:green;"></div>