CSS一个div内两个子元素的高度自适应

3-1-2019更新:使用flex布局,align-items:flex-start即可。


设想这样一个情况:一个父元素有两个子元素,父元素的高度不确定,用子元素撑起来

但是这会导致一个问题:各个子元素的高度不一致,为子元素添加height:100%是无效的。这种方式需要父元素高度确定,然而父元素的高度由子元素确定。

猜想渲染时由于父元素高度不确定,会计算出各个子元素的高度再确定父元素高度,但计算子元素高度时并没有父元素高度可以参考,因此上述方法行不通。

你可以

为父元素设置固定高度

配合height:100%,两个子元素都能撑满父元素

利用span元素与布局

如果span的定位是absolute类型,那么它的高度可以等于父元素的高度。父元素只根据相对定位的子元素决定高度,也就是说,absolute定位的span设置height:100%是有效的,父元素的高度对它来说是已知的。

这种方法需要避免span元素与其他元素重合,需要留出span的位置,将span放到位置上。

这种方法下,父元素的高度仍然由最高的相对定位的子元素确定,其它元素放到span中,所以需要知道最高的子元素。

使用同色背景

虽然很简单,却很实用的方法。子元素的高度虽然不都是100%,但效果一样。

发表评论

电子邮件地址不会被公开。