height百分比%-px的实现(增加两个嵌套标签)~

在http://blog.idea5.org/implementation-of-the-height-to-percentage-minus-px.html稍微探讨了下百分比%-px的display:table-row高度自适应实现方法，这里针对另一种position:absolute后定义bottom值的高度自适应实现方法： 这里推荐blueidea的讨论：

http://bbs.blueidea.com/thread-2922791-1-1.html

做个简单的实例：

外部容器变化，内部div自适应变化：

@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@
@

这里注意的是对于position:absolute的元素的定位元素：

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

来自：

http://www.w3school.com.cn/css/css_positioning_absolute.asp

意思是position:static的是普通文档流未定位，relative和absolute都是已定位的。所以.container需要position:relative来约束.autofix元素。 这里更重要的一点是:.autofix的高是自适应的，即滚动条以下不计入高的值，即.autofix的高是自适应的，虽然表现只能出现滚动条活隐藏部分，那么利用这点，它内部的元素的height:100%就会是自适应的了～ 当然bottom:100px;可以使用bottom:0;margin-bottom:100px;来代替～但单独的margin-bottom:100px;是不能自适应的。

外部容器变化，内部div高度自适应变化：

这个示例的.autoheight元素始终没有撑开父元素，所以父元素没有出现滚动条，当然为了不出现滚动条.autofix元素overflow:hidden也是不错的。 有了高度自适应，就可以实现百分比%-px的高度了:

外部浅绿色容器变化，内部img高度61.8%-100px：

比较完美地实现height:%-px;但多了两个多个嵌套在内的标签。当然可以使用:after的content来减少Html标签的使用量。