javascript - 为父 div 的元素设置动态高度

Question

我有以下场景:

 <div class="parent" style="height:100%">
        <div class="left" style="float:left" dynamic-height element-id="{{$index}}">
        </div>
        <div class="right" style="float:left">
            <div>Element 1</div>
            <div>Element 2</div>
    </div>
    </div>

我正在尝试让左边的元素与 .right 或 .parent 的高度相同，我尝试为此添加指令，但收效甚微，有人有更好的主意吗？

指令:

.directive('dynamicHeight', function() {
    return {
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                post: function postLink(scope, elem, attrs) {
                    var element = "#discussion-element-"+ attrs.elementId;
                    var myEl = angular.element( document.querySelector( element) );
                    var height = myEl[0].offsetHeight;
                    element.height(height);
                }
            }
        }
    };
});

说明问题的图片:

Answer 1

尝试删除 float: left 样式并改为应用这些样式:

.parent {
    display: table;
}

.parent > * {
    display: table-cell;
}