使用angularjs根据标题的高度更改顶部填充

Question

i have a fixed header and a mid section following it. When page is resized or opened on smaller screens header height increases and thus expands over the mid section. I want to dynamically set the value of padding-top in angularjs way. I know how to do this in jquery but this doesn't looks appropriate to me.

Html :

<div id="mainPage">
    <div id="header" ng-controller="DecorpotCtrl">

    </div>
    <!-- End of div = header-->

    <div ui-view class="mid"></div>

</div>

css :

#header {
  height: auto;
  z-index: 20;
  background-color: white;
  position: fixed;
  width: 100%;
}

.mid {
  height: 84%;
  background-color: white;
  padding-top: 5%;
}

Or there is any other pure css way of doing it.

Answer 1

Generally I'd say the angular way, or more precisely "a" angular way, is to make a custom directive and do everything in there, using jQuery or whatever you want :)

Just remember to unhook any custom stuff in the $destroy event of the scope!

link: function (scope, element, attrs) {
    function onResize() {

    };
    window.addEventListener("resize", onResize);

    scope.$on("$destroy", function () {
        window.removeEventListener("resize", onResize);
    });
}