bug_zero

不懂什么叫做专业的小前端~~~~

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

前言:

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

正题:

  问题重现:

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

  解决方案:

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

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

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

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

  

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

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

 

posted on 2017-03-24 16:45  bug_zero  阅读(1727)  评论(0编辑  收藏  举报