height百分比%-px的实现(box-sizing)~

之前稍微研究了下height:%-px的方法：

• 增加两个嵌套标签，利用position:absolute;bottom:固定px;top:0;的自适应来实现；
• 利用display:tale-row；下行固定高，上行自适应来实现；
• 这里使用了box-sizing来实现.

box-sizing是css3的属性，除了ie6，其他浏览器都基本支持，ie6可以用expression来修补。 跨浏览器的写法是：

div { box-sizing: border-box; // Opera，IE9 -moz-box-sizing: border-box; // Firefox，Seamonkey -webkit-box-sizing: border-box; // Chrome，Safari -ms-box-sizing: border-box; // IE7，IE8 }

这里推荐两篇好文：

http://my.opera.com/BB9z/blog/box-sizing http://www.quirksmode.org/css/box.html http://www.blueidea.com/tech/web/2009/7258.asp

其实，个人认为border/2+padding+width|height作为盒模型的宽|高应该更符合中文里对内外边距边框的理解。 设定了box-sizing:border-box后，就会将padding和border也算入width|height了，面是例子：

width:100%; height:100%;

使用了box-sizing后，height:%-px就非常容易实现了，只要设定height:%；padding:px；就可以了，如：

ie6使用expression或者怪异模式，推荐expression，这里暂时没给出例子。