Angular material layout - expand to fill window

<div flex style="height: -webkit-calc(100% - 76px)">
    <div ng-view flex layout-fill style="height: 100%">
    </div>
</div>

Just thought that this answer should go in an answer to make it easier for others.


Simple Example:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="MyApp" layout="column" ng-cloak>
    <div flex layout="row" layout-align="center center" style="background: plum;">
        <div>page filled and content centered</div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
    <script>
        angular.module("MyApp", ["ngMaterial"]);
    </script>
</body>
</html>

Output:

enter image description here


You can also do it without adding extra styles just using the Angular Material elements.

Basically you need to add layout to all the parents of the elements you want to fill vertically. You also don't need to use so many layout-fills.

Here the demo: http://plnkr.co/edit/E244WNhvMXw9VC7DpAW0?p=preview

I also added a background color to the sidebar to demonstrate that it also fills vertically.

Tags:

Html

Css

Angularjs

Angularjs Material

Recent Posts