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%，但效果一样。