css中实现子父元素高度自适应子元素高度

先说明下问题,需求是child2中字数不固定,需要实现parent随着child2的高度变化而变化:

css中实现子父元素高度自适应子元素高度

解决办法:

parent:

position:relative;

child:

position:absolute;

height:100%;

解释:当某个absolute定位元素的父元素具有position:relative/absolute/fixed时,定位元素都会依据父元素而定位,而父元素没有设置position属性或者设置了默认属性,那么定位属性会依据html元素来定位。给父元素设置relative定位,表明绝对定位的就是该父元素了。

然后对子元素使用absolute定位,高度100%;当然,这样会让该child从文档流中抽出。不过不影响,需要微调下相邻的子元素让其看起来不那么尴尬就行了。