アプリケーションのレイアウトを設計するために角度のあるマテリアル デザイン レイアウトを使用しています。
ページは、ナビゲーション、メイン、フッターの 3 つのスコープで構成されます。ここで私が今までやったこと
私が望むのは、フッターが常に下部にあり、主要部分が 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>
そしてジャバスクリプト
angular
.module('demoApp', ['ngMaterial'])
.controller("DemoController", function($scope){
})
css ファイルが空です。
私の質問は、ナビゲーション、メイン、フッターを使用してレイアウトを設計する方法ですか?