javascript - 动态填充父容器高度的一半

Question

我需要在不知道或定义父级高度的情况下填充父级的一半高度以进行响应式使用:

详细来说，这意味着 .ftr-row 的高度必须是 .ftr-rows 的 50%。我已经尝试过各种方法，例如“绝对定位”、“显示为表格”等。如何解决这个问题？

[...]

<!--##############
     LINE 16 HTML 
    ##############-->

      <div class="grid_6 ftr-rows ftr-half">

                <div class="ftr-row">
                    <div class="ftr-row-text">
                        <h1>HEADLINE 1</h1>
                        <hr />
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                    </div>
                </div>

                <div class="ftr-row">
                    <img src="http://lorempixel.com/960/475/abstract/1" class="ftr-row-img" />
                </div>

            </div>

[...]

http://codepen.io/retober/pen/vLOpVP?editors=110

[...]

/* LINE 64 IN CSS */ 
/* HALF WIDTH / HALF HEIGHT */

.ftr-rows {}

.ftr-row {}

.ftr-row-img {}

.ftr-row-text {}

[...]

如果可能的话，我想避免使用 flexbox，但任何其他大多数兼容的解决方案都可以。

提前致谢!

Answer 1

使用 Jquery 怎么样？

var half_height = $(".ftr-rows").height()*(.5)

$(".ftr-row").css("height", half_height)

http://jsfiddle.net/cc4h10cr/3/