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

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/