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>

使两个子组件在父组件中达到相同的高度

1 个答案: