Fill content height


I spent few hours looking for a solution to fill an element with 100% height and no solution for this. So I wrote this directive that could help.

    <div fill-content>

.directive('fillContent', function ($ionicScrollDelegate) {
return {
    link: function ($scope, element, attrs)
        element.ready(function () {
            element[0].style.height = $ionicScrollDelegate.getScrollView().__clientHeight + 'px';


Nice one :smile: congratulation, I will move it to tutorials section


i would prefer a directive direct on the ion-content or on an parent element which provides the values to the child scopes:

you ca replace offsetHeight with clientHeight… as you want.

In that way you could add a watcher to the elements height and width --> and recalculate the height and width --> and with ng-style all other elements get resized automatically :wink:


Nice update… I will upgrade my code like you said. Thank you.