前言:
此方法IE6以上(不包括IE6)浏览器均可行。
正题:
问题重现:
当一个没有设置高度的父级元素下拥有两个子元素(为了方便,就用两个就好了,不代表一定是两个),一个子元素有高度或被内容撑开(这时候父元素被撑开了),另一个子元素我们希望让他高度根据父元素自适应,比如高度占父元素的70%的话,在不借助弹性盒子布局的情况下如何使用CSS实现呢?
解决方案:
我们知道css中在父元素没有被设置高度(height)的时候,子元素的高度(height)设置百分比是无效的,其核心原因在于这时候他并不知道参照物是谁,
父元素也没有明确设置高度,这时候浏览器就默认不做任何计算,就导致了即使子元素设置了高度也无效的情况。那么纯css方式就没任何办法能实现了吗,答案是否定的。
在css的世界里有个叫做定位的布局方式,其名下有个叫做绝对定位的小弟,这个小弟需要被设置了定位(absolute,fixed,relative任意一种)的父元素或者祖先元素作为参照物,
然后相对于他们去进行定位。参照物。。。参照物,。。。参照物。。。。好吧 那么这时候既然已经有了参照物了,我们设置子元素的高度为百分比的时候会发生什么呢?看图:
这时候就可以看到,子元素以父元素为参照物进行计算高度了,问题也就解决了。
最后,如果大家还有什么更好的方案,请分享下你的思路,感谢~~