angularjs div css update on window resize

by Garth Edwards

HTML

<div ng-app="myapp">
    <div id=header>I am the header</div>
    <div id="content" contentsize>I am the contentscroll div</div>
    <div id=footer>I am the footer</div>
</div>

CSS

#header {
    height: 5%;
    min-height: 25px;
    max-height: 100px;
    top: 0;
    right: 0;
    left: 0;
    position: absolute;
    background-color: #989898;
}
#content{
    top: 6%;
    right: 0;
    bottom: 6%;
    left: 0;
    position:absolute;
    background-color: rgba(248,38,82,0.7);
    z-index: 99;
}
#footer {
    height: 5%;
    min-height: 25px;
    max-height: 100px;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    background-color: #989898;
}

JavaScript

var myapp = angular.module('myapp', []);

myapp.directive('contentsize', function($window) {
    return {
        restrict: 'A',
        scope:{},
        link:function (scope, element, attrs) {
            scope.$watch(function(){return $window.innerHeight;}, 
                function () {
                    var hh = document.getElementById('header').offsetHeight;
                    var fh = document.getElementById('footer').offsetHeight;
                    console.log('hh & fh', hh, fh);                    

                    var tp = hh + 2;
                    var bt = fh + 2;
                    console.log('tp & bt', tp, bt);                

                    var changes = {
                        bottom: bt + 'px',
                        top: tp + 'px',
                    }
                    element.css(changes);
                }, 
            true);
        }
    };
});