【CSS黑魔法】父元素无高度情况下的子元素高度自适应方法

前言：

　　此方法IE6以上（不包括IE6）浏览器均可行。

正题：

　　问题重现：

　　　　当一个没有设置高度的父级元素下拥有两个子元素（为了方便，就用两个就好了，不代表一定是两个），一个子元素有高度或被内容撑开（这时候父元素被撑开了），另一个子元素我们希望让他高度根据父元素自适应，比如高度占父元素的70%的话，在不借助弹性盒子布局的情况下如何使用CSS实现呢？

　　解决方案：

　　　　我们知道css中在父元素没有被设置高度（height）的时候，子元素的高度（height）设置百分比是无效的，其核心原因在于这时候他并不知道参照物是谁，

父元素也没有明确设置高度，这时候浏览器就默认不做任何计算，就导致了即使子元素设置了高度也无效的情况。那么纯css方式就没任何办法能实现了吗，答案是否定的。

在css的世界里有个叫做定位的布局方式，其名下有个叫做绝对定位的小弟，这个小弟需要被设置了定位（absolute,fixed,relative任意一种）的父元素或者祖先元素作为参照物，

然后相对于他们去进行定位。参照物。。。参照物，。。。参照物。。。。好吧 那么这时候既然已经有了参照物了，我们设置子元素的高度为百分比的时候会发生什么呢？看图：

　　

这时候就可以看到，子元素以父元素为参照物进行计算高度了，问题也就解决了。

最后，如果大家还有什么更好的方案，请分享下你的思路,感谢~~