码迷,mamicode.com
首页 > 其他好文 > 详细

子元素绝对定位,父元素高度自适应子元素高度

时间:2017-07-26 19:21:03      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:span   相对   font   hidden   设置   css   pre   overflow   code   

   子元素设置了绝对定位,父元素没有设置相对定位,因此子元素脱离了文档流,父元素高度就变成没有了,如何让父元素高度自适应子元素高度。

   子元素的高度是不确定的

   可以JS设置父元素高度

<<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">divid="father"> <<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">div id="son"></<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">div> </<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">div>

   JS设置父元素高度

var father = document.getElementById(‘father‘); var son = document.getElementById(‘son‘); father.style.height=son.offsetHeight+‘px‘;

css给父元素设置overflow:hidden也可以包裹子元素
在子元素最后一个元素后面:添加一个空元素,设置style:clear:both

子元素绝对定位,父元素高度自适应子元素高度

标签:span   相对   font   hidden   设置   css   pre   overflow   code   

原文地址:http://www.cnblogs.com/oldZhangFeng/p/7241299.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!