使两个子组件在父组件中具有相同的高度

【问题标题】：Making two child components into same height in a parent component使两个子组件在父组件中具有相同的高度
【发布时间】：2018-10-16 14:53:21
【问题描述】：

我有一个渲染两个子组件的组件，考虑到以下条件，我希望两个组件处于相同高度 1. 当屏幕处于正常大小时 2. 当我调整屏幕大小时最好的策略是什么实现这个？

【问题讨论】：

normal size 是什么意思？而不是我建议使用flex-box 模型。

标签： reactjs css

【解决方案1】：

我会使用一点JQuery 来实现这一点。检查最高的孩子并将该值应用于另一个孩子。

 $(document).ready(function () {
        $(window).resize(function () {
            $(".child1").height("auto");
            $(".child2").height("auto");
            var height = Math.max($(".child1").outerHeight(), $(".child2").outerHeight());
            $(".child1").height(height);
            $(".child2").height(height);
        }).resize();
    });

.child1 {background-color:red; float:left; width:50%;}
.child2 {background-color:blue; float:left; width:50%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div>
  <div class="child1">
  </div>
  <div class="child2">
    <br /><br /><br /><br /><br /><br /><br />
  </div>
</div>

【讨论】：