Question

我使用角度材质设计布局来设计我的应用程序布局该页面由三个范围，导航，主页和页脚组成。这是我到现在为止所做的事情

enter image description here

我想要的是，页脚应始终位于底部，并且以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文件为空。

我的问题是，如何使用导航，主页和页脚设计布局？

Answer 1

我有我想要的东西

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Angular Material - Starter App</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"/>

    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,700'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.3/angular-material.css"/>
    <link rel="stylesheet" href="./style.css"/>

</head>

<body ng-app="starterApp" layout="column">

    <div id="navbar" layout="column">
        <div id="home" layout="row" layout-align="center start">
            <md-toolbar flex-gt-md="40" flex-lg="40" flex-gt-lg="40" layout="row">
                <h1>Navi1</h1>
            </md-toolbar>
        </div>
        <div id="home" layout="row" layout-align="center start">
            <md-toolbar flex-gt-md="40" flex-lg="40" flex-gt-lg="40" layout="row">
                <h1>Navi2</h1>
            </md-toolbar>
        </div>
    </div>

    <div flex layout="column">
        <div layout="row" layout-align="center start">
            <md-toolbar flex-gt-md="40" flex-lg="40" flex-gt-lg="40">
                <h1>Title</h1>
            </md-toolbar>
        </div>

        <div flex layout="row" style="border:1px solid blue;" layout-align="center">
            <md-content flex id="content" flex-gt-md="40" flex-lg="40" flex-gt-lg="40" md-scroll-y>
                <h2>Lia Luogo</h2>

                <p>
                    I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
                    swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
                    cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
                    chalk and cheese. Lancashire.
                </p>

                <p>
                    I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
                    swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
                    cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
                    chalk and cheese. Lancashire.
                </p>


                <p>
                    I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
                    swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
                    cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
                    chalk and cheese. Lancashire.
                </p>

                <p>
                    I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
                    swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
                    cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
                    chalk and cheese. Lancashire.
                </p>

                <p>
                    I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
                    swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
                    cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
                    chalk and cheese. Lancashire.
                </p>

                <p>
                    I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
                    swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
                    cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
                    chalk and cheese. Lancashire.
                </p>

                <p>
                    I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
                    swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
                    cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
                    chalk and cheese. Lancashire.
                </p>

                <p>
                    I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
                    swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
                    cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
                    chalk and cheese. Lancashire.
                </p>

                <p>
                    I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
                    swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
                    cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
                    chalk and cheese. Lancashire.
                </p>

                <p>
                    I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
                    swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
                    cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
                    chalk and cheese. Lancashire.
                </p>

                <p>
                    I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
                    swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
                    cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
                    chalk and cheese. Lancashire.
                </p>

                <p>
                    I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
                    swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
                    cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
                    chalk and cheese. Lancashire.
                </p>

                <p>
                    I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
                    swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
                    cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
                    chalk and cheese. Lancashire.
                </p>

                <p>
                    I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
                    swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
                    cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
                    chalk and cheese. Lancashire.
                </p>
            </md-content>

        </div>

    </div>

    <div layout="row" layout-align="center start">
        <md-toolbar flex-gt-md="40" flex-lg="40" flex-gt-lg="40" layout="row">
            <h1>Footer</h1>
        </md-toolbar>
    </div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-aria.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.3/angular-material.js"></script>

<script type="text/javascript">

    angular
            .module('starterApp', ['ngMaterial'])
            .run(function ($log) {
                $log.debug("starterApp + ngMaterial running...");
            });

</script>

</body>
</html>

如何设计布局导航主页脚

1 个答案: