我正在使用角度材料设计布局来设计我的应用程序布局。
该页面由三个范围组成，导航，主要和页脚。这是我到目前为止所做的
我想要的是，页脚应始终位于底部和主要部分，以 lorem ipsum 开头的部分应填充可用的高度空间。html代码是：
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<meta charset="UTF-8">
<title>CodePen - Using md-gridlist with md-icon Avatars</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
<link rel='stylesheet prefetch' href='http://rawgit.com/angular/bower-material/master/angular-material.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css'>
<link rel="stylesheet" href="css/style.css">
<script src="js/modernizr.js"></script>
</head>
<body layout="column" layout-align="start center" ng-controller="DemoController">
<div style="width:100%;border:1px solid red;margin-top:5px;" layout="column" layout-align="center center">
<div style="width:100%;" layout="row" flex="45" layout-align="center center">
<md-toolbar flex="45">
<h2 class="md-toolbar-tools">
<span>Navi1</span>
</h2>
</md-toolbar>
</div>
<div style="width:100%;" layout="row" flex="45" layout-align="center center">
<md-toolbar flex="45">
<h2 class="md-toolbar-tools">
<span>Navi2</span>
</h2>
</md-toolbar>
</div>
</div>
<main style="width:100%;border:1px solid red;" layout="column">
<div style="width:100%;" layout="row" layout-align="center start">
<md-toolbar flex="45">
<md-toolbar class="md-warn" layout="row">
<div class="md-toolbar-tools">
<span class="md-flex">Title</span>
</div>
</md-toolbar>
</md-toolbar>
</div>
<div style="width:100%;" layout="row" layout-align="center start">
<md-content class="md-padding" flex="45">
Lorem ipsum dolor sit amet, ne quod novum mei. Sea omnium invenire mediocrem at, in lobortis conclusionemque nam. Ne deleniti appetere reprimique pro, inani labitur disputationi te sed. At vix sale omnesque, id pro labitur reformidans accommodare, cum labores honestatis eu. Nec quem lucilius in, eam praesent reformidans no. Sed laudem aliquam ne.
<p>
Facete delenit argumentum cum at. Pro rebum nostrum contentiones ad. Mel exerci tritani maiorum at, mea te audire phaedrum, mel et nibh aliquam. Malis causae equidem vel eu. Noster melius vis ea, duis alterum oporteat ea sea. Per cu vide munere fierent.
</p>
<p>
Ad sea dolor accusata consequuntur. Sit facete convenire reprehendunt et. Usu cu nonumy dissentiet, mei choro omnes fuisset ad. Te qui docendi accusam efficiantur, doming noster prodesset eam ei. In vel posse movet, ut convenire referrentur eum, ceteros singulis intellegam eu sit.
</p>
<p>
Sit saepe quaestio reprimique id, duo no congue nominati, cum id nobis facilisi. No est laoreet dissentias, idque consectetuer eam id. Clita possim assueverit cu his, solum virtute recteque et cum. Vel cu luptatum signiferumque, mel eu brute nostro senserit. Blandit euripidis consequat ex mei, atqui torquatos id cum, meliore luptatum ut usu. Cu zril perpetua gubergren pri. Accusamus rationibus instructior ei pro, eu nullam principes qui, reque justo omnes et quo.
</p>
<p>
Sint unum eam id. At sit fastidii theophrastus, mutat senserit repudiare et has. Atqui appareat repudiare ad nam, et ius alii incorrupte. Alii nullam libris his ei, meis aeterno at eum. Ne aeque tincidunt duo. In audire malorum mel, tamquam efficiantur has te.
</p>
<p>
Qui utamur tacimates quaestio ad, quod graece omnium ius ut. Pri ut vero debitis interpretaris, qui cu mentitum adipiscing disputationi. Voluptatum mediocritatem quo ut. Fabulas dolorem ei has, quem molestie persequeris et sit.
</p>
</md-content>
</div>
</main>
<div style="width:100%;" layout="row" layout-align="center start">
<md-toolbar class="md-medium-tall" flex="45">
<div layout="row" layout-align="center center" flex>
<span>FOOTER</span>
</div>
</md-toolbar>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.1.3/hammer.min.js'></script><script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.js'></script><script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular-animate.js'></script><script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular-aria.js'></script><script src='http://rawgit.com/angular/bower-material/master/angular-material.js'></script><script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
和 javascript
angular
.module('demoApp', ['ngMaterial'])
.controller("DemoController", function($scope){
})
css 文件为空。
我的问题是，如何设计带有导航、主要和页脚的布局？