how to set dynamically height to element?

Question

I am trying to set dynamically height to element in my demo .I will tell you issue I am taking static or constant value of height in my demo .I take 250px const

Answer 1

set dynamically height with header footer to element? HTML

<div class="content-wrapper" win-height>
</div>

JS

app.directive('winHeight', function ($window) {
    return{
        link: function (scope, element, attrs) {
            angular.element(window).resize(function () {
                scope.winHeight();
            });
            setTimeout(function () {
                scope.winHeight();
            }, 150);
            scope.winHeight = function () {
                element.css('min-height', angular.element(window).height() - 
                (angular.element('#header').height() + 
                 angular.element('#footer').height()));
            }
        }
    }
})

Answer 2

The following should work. Putting it in the codepen snippet won't show as the window size is small so it draws height from the min-height attribute. Test it out on a bigger window.

<div id="wrapper" style="height: {{ hgt }}px" >
    <h4 class="headerTitle">tell Mother name</h4>
<div>

Answer 3

You could simply achieve this by own directive which will add css dynamically

Markup

<div id="wrapper" set-height>
  <h4 class="headerTitle">tell Mother name</h4>
</div>

Directive

.directive('setHeight', function($window){
  return{
    link: function(scope, element, attrs){
        element.css('height', $window.innerHeight/3 + 'px');
        //element.height($window.innerHeight/3);
    }
  }
})

The better solution would be you could use ng-style directive that expects the values in JSON format.

<div id="wrapper" ng-style="{height: hgt+ 'px'}">
  <h4 class="headerTitle">tell Mother name</h4>
</div>

Working Codepen

Answer 4

Here is an example for applying other elements width to current element.

Width of the element which has the class name "container" will apply to div using flexibleCss angular js directive

<div flexible-width widthof="container">
</div>

myApp.directive('flexibleWidth', function(){

    return function(scope, element, attr) {
            var className = attr.widthof; 
            var classWidth = angular.element(document.querySelectorAll('.'+className)[0])[0].clientWidth;
            element.css({ 
                 width: classWidth+ 'px' 
             });
            };
   });