之前曾写过一篇文章说如何实现元素高度随兄弟元素高度变化而变化的文章,但是发现并不符合新的需求,仍以原图为例

现需求如下：

1.A、B元素平分C元素,即各占50%

2.A元素高度随B元素高度的变化而变化

3.B元素高度随A元素高度的变化而变化

简单来讲就是A,B任何一个元素高度变大则另一个元素的高度也会变大，这个效果有点类似table里的单元格，也就是table里的cell,想到有display:table属性，那自然应该有display:table-cell。结果一查api还真有,那就简单多了根本不用写js了直接样式就可以全搞定。父元素C用display:table,AB两个子元素用display:table-cell就可以了实现起来也是蛮简单的。

可分别通过调节A元素的高度查看B元素的效果，通过调整B元素的高度查看A元素的效果

demo在这里,如果打不开备用demo在这里。

See the Pen 元素高度随兄弟元素高度变化而变化(二) by openks (@openks) on CodePen.