Angular material layout - expand to fill window

后端未结

关注

 3  506

I am attempting to create an Angular material layout. My goal is to create a page where it fills the entire browser window without creating a vertical scroll bar. At the t

相关标签:

3条回答

醉话见心

2020-12-29 02:24

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:

0 讨论(0)

盖世英雄少女心

2020-12-29 02:35

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...
悲&欢浪女

2020-12-29 02:35
```
<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.
0 讨论(0)
发布评论:

提交评论
- 加载中...