Создание двух дочерних компонентов в одну высоту в родительском компоненте

Question

У меня есть компонент, который отображает два дочерних компонента, и я хочу, чтобы два компонента были одинаковой высоты, учитывая следующие условия: 1. когда экран имеет нормальный размер, 2. когда я изменяю размер экрана. Какова была бы лучшая стратегия длядостичь этого?

Answer 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>