![percentage-px-height-implementation-box-sizing2](http://blog.idea5.org/wp-content/uploads/2010/12/percentage-px-height-implementation-box-sizing2-221x300.png)
- 增加两个嵌套标签,利用position:absolute;bottom:固定px;top:0;的自适应来实现;
- 利用display:tale-row;下行固定高,上行自适应来实现;
- 这里使用了box-sizing来实现.
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了,面是例子:
![percentage-px-height-implementation-box-sizing](http://blog.idea5.org/wp-content/uploads/2010/12/percentage-px-height-implementation-box-sizing.png)
width:100%; height:100%;