Teilen von Boxen auf 50% Höhe ihres Elternteils

Question

Ich möchte die aktiven Elemente auf 50% Höhe ihres Elternelements aufteilen. Wenn ich also die ersten beiden Elemente öffne, sollten sie sich auf 50% ihrer Elternklasse aufteilen .items (beide .item haben 100px). So kann ich beides ohne Scrollen sehen. Auch wenn ich alle drei öffne, sollten sie die Höhe von 100px bekommen, was die Hälfte ihrer Eltern ist. Mein Problem ist, dass sich der zweite Gegenstand überschneidet und ich scrollen muss. Was ist los mit dir?

angular.module("myApp", []).controller("myController", function($scope) { 
 
    $scope.itemList = [{ 
 
    id: 1, 
 
    name: "Item 1", 
 
    isOpen: false 
 
    }, { 
 
    id: 2, 
 
    name: "Item 2", 
 
    isOpen: false 
 
    }, { 
 
    id: 3, 
 
    name: "Item 3", 
 
    isOpen: false 
 
    }]; 
 

 
    $scope.setHeight = function() { 
 
    if ($scope.itemList.length > 1) { 
 
     var typeHeaderHeight = $('.item-header').outerHeight(); 
 
     var halfHeight = Math.round($('.items').outerHeight()/2); 
 

 
     setTimeout(() => { 
 
     $('.item').css('height', typeHeaderHeight); 
 
     $('.item.active').css('height', halfHeight); 
 
     }); 
 
    } 
 
    } 
 
});

.frame { 
 
\t display: flex; 
 
\t flex-direction: column; 
 
\t height: 200px; 
 
} 
 

 
.items { 
 
    display: flex; 
 
    flex: 1 1 auto; 
 
    flex-direction: column; 
 
    overflow: auto; 
 
    border: 1px solid black; 
 
} 
 

 
.item { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 0 0 auto; 
 
    margin-bottom: 5px; 
 
    background-color: rgb(150, 150, 150); 
 
    color: white; 
 
} 
 

 
.item:hover { 
 
    cursor: pointer; 
 
} 
 

 
.item-header { 
 
    position: relative; 
 
    display: flex; 
 
} 
 

 
.active { 
 
    background-color: rgb(220, 220, 220); 
 
    color: rgb(150, 150, 150); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div class="frame" ng-app="myApp" ng-controller="myController"> 
 
    <div class="items"> 
 
    <div class="item" ng-repeat="item in itemList" ng-click="item.isOpen = !item.isOpen; setHeight()" ng-class="{active: item.isOpen}"> 
 
     <div class="item-header"> 
 
     {{item.name}} 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Das Problem ist, dass Sie die Werte von typeHeaderHeight und halfHeight Variablen außerhalb des Timeout setzen, so dass es immer berechnet, bevor der Artikel tatsächlich so ist es geöffnet wird Fehler in den Berechnungen

versuchen, es zu machen wie

 
    
 

 
     setTimeout(() => { 
 
     var typeHeaderHeight = $('.item-header').outerHeight(); 
 
     var halfHeight = Math.round($('.items').outerHeight()/2); 
 
     
 
     $('.item').css('height', typeHeaderHeight); 
 
     $('.item.active').css('height', halfHeight); 
 
     }); 
 
    },500) 
 
     
 

Eine weitere Sache .. Ich empfehle $timeout nicht verwenden setTimeout von Vanille JavaScript versuchen zu verwenden, anstatt es