當向菜單添加更多項目時，將內容div高度展開爲左側菜單高度

Question

我有一個左側菜單，可以在其中添加或刪除項目。在右側有一個內容div，它有一個最小高度。

使用角度向左側菜單中添加更多項目時，如果左側菜單高於最小高度，我希望內容div將其高度展開至左側菜單。

還有一件事是我也想要ng-animate的內容div的下拉效果。

這裏是小提琴鏈接：link

var app = angular.module('myApp', ['ngAnimate']); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.items = ['foo', 'bar']; 
 
    var num = 0;  
 
    $scope.add = function() { 
 
    $scope.items.push(num); 
 
    num++; 
 
    } 
 
});

#left { 
 
    width: 25%; 
 
    background-color: lightblue; 
 
    float: left; 
 
} 
 

 
#right { 
 
    width: 75%; 
 
    float: left; 
 
    background-color: lightgreen; 
 
    min-height: 200px 
 
} 
 

 
.item { 
 
    height: 20px; 
 
    opacity: 1; 
 
    transition: 0.5s; 
 
} 
 

 
.item.ng-enter { 
 
    opacity: 0; 
 
    height: 0;  
 
} 
 

 
.item.ng-enter-active { 
 
    height: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
<script src="https://code.angularjs.org/1.5.7/angular-animate.min.js"></script> 
 

 
<div id="wrapper" ng-app="myApp" ng-controller="myCtrl"> 
 
    <div id="left"> 
 
    <p class="item" ng-repeat="item in items"> 
 
     {{item}} 
 
    </p> 
 
    </div> 
 
    <div id="right"> 
 
    <button ng-click="add()">add</button> 
 
    {{names}} 
 
    </div> 
 
</div>

Answer 1

無需哈克DOM操作使用jQuery或ng-style 。只需添加display: flex到包裝：

#wrapper { 
    display: flex; 
} 

https://jsfiddle.net/babvqx8e/26/

使用Flexbox的，您還可以去除浮動：

#left { 
    width: 25%; 
    background-color: lightblue; 
} 

#right { 
    width: 75%; 
    background-color: lightgreen; 
    min-height: 200px 
} 

更多信息請參閱本really nice guide to Flexbox。

Answer 2

使用jQuery：

$("#right").css({'height': $("#left").outerHeight()}); 

它將#right的高度設置爲#left的外部高度。

Answer 3

所以我會回答我的問題。我設法用NG風格指令的做到這一點：在控制器

<div id="right" ng-style="{height: hgt+ 'px'}">

然後：

$scope.hgt = $('#left').outerHeight() + 40;

http://jsfiddle.net/babvqx8e/22/