Angular Material 固定工具栏和粘页脚

Posted 2023-03-07

技术标签:

【中文标题】Angular Material 固定工具栏和粘页脚【英文标题】：Angular Material fixed toolbar AND sticky footer 【发布时间】：2016-04-15 17:01:53 【问题描述】：

一段时间以来，我一直在努力解决这个问题，并想出了一个解决方案。我想要一个固定的工具栏（导航栏）以及一个粘性（浮动）页脚。页脚应浮动在主要部分的底部，但在没有内容时会粘在底部。似乎我可以做一个或另一个，但不能两者兼而有之。使用这种方法，工具栏是固定的，但页脚不粘。当主要部分为空时，它会与工具栏对接。

<body ng-controller="MainCtrl" layout="row">

  <div layout="column" flex>
    <md-toolbar class="md-medium-tall">
        <div class="md-toolbar-tools">
            <span>HEADER</span>
            <span flex></span>
            <md-button class="md-raised" ng-click="toggleContent(!displayContent)">onOff</md-button>
            <span flex></span>
            <md-button class="md-raised" ng-click="toggleNum()">half/full</md-button>
        </div>
    </md-toolbar>


    <md-content>
        <div layout="column" flex>
            <div ng-if="displayContent" style="background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim">body card.title</div>
            <div style="background-color: red;" flex></div>
            <div style="background-color:orange;color:white;" >footer item</div>
        </div>  
    </md-content>           
  </div>    
</body>

下面的代码作为一个粘性页脚，但工具栏也会滚动。

<body ng-controller="MainCtrl" layout="row">

  <div layout="column" flex>
    <md-toolbar class="md-medium-tall">
        <div class="md-toolbar-tools">
            <span>HEADER</span>
            <span flex></span>
            <md-button class="md-raised" ng-click="toggleContent(!displayContent)">onOff</md-button>
            <span flex></span>
            <md-button class="md-raised" ng-click="toggleNum()">half/full</md-button>
        </div>
    </md-toolbar>

    <div layout="column" flex>
      <div ng-if="displayContent" style="background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim">body card.title</div>
      <div style="background-color: red;" flex></div>
      <div style="background-color:orange;color:white;" >footer item</div>
    </div>  
  </div>    
</body>

这似乎是完成我正在尝试做的事情的正确灵活方式，但我无法做到完美。

除了这种方法之外，我还使用了一种更传统的方法来实现粘性页脚，使用从calc(100vh - header - footer) 计算的主要部分高度。当 BAM .. angular-material 决定使他们的工具栏大小随视口大小而变化时，我几乎已经弄清楚了。我可能会提出更改请求，以便我可以在md-content 部分使用空白填充<div flex></div>，但我想先了解是否有人有更好的解决方案。

【问题讨论】：

【参考方案1】：

也许这个 sn-p 可以帮助：

angular
  .module('myApp', ['ngMaterial'])
  .controller('MainCtrl', function($scope) 
    console.log('MainCtrl');
    $scope.cards = [
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    , 
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    , 
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    , 
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    , 
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    , 
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    , 
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    , 
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    , 
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    , 
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    , 
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    ];
    $scope.displayContent = true;
    $scope.displayLim = 100;
    $scope.toggleContent = function(showContent) 
      $scope.displayContent = showContent;
    ;
  );

<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
</head>
<body ng-app="myApp" ng-controller="MainCtrl" layout="row">

  <div layout="column" flex>
    
    <md-toolbar class="md-medium-tall">
        <div class="md-toolbar-tools">
            <span>HEADER</span>
            <span flex></span>
            <md-button class="md-raised" ng-click="toggleContent(!displayContent)">onOff</md-button>
            <span flex></span>
            <md-button class="md-raised" ng-click="toggleNum()">half/full</md-button>
        </div>
    </md-toolbar>
    
    <md-content layout="row" flex>
        <div layout="column" flex>
            <div ng-if="displayContent" style="background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim">body card.title</div>
            <div style="background-color: red;" flex></div>
        </div>  
    </md-content>
    
    <div layout="row" class="footer" layout-align="center center">
      <h2>My Footer</h2>
    </div>
    
  </div>    
</body>

【讨论】：

感谢您的回答，非常接近。我已经编辑了我的答案，因为我忘了提到我希望页脚浮动在主要内容的底部。在您的示例中，它像工具栏一样固定。【参考方案2】：

您应该使用md-content 作为滚动包装，使用flex 将您的内容放入其中，并使用flex="none" 放入页脚。它会一直粘在md-content 容器的底部，因为它有一个CSS overflow: auto。 angular-material layout children

  <md-toolbar class="md-medium-tall">
    <div class="md-toolbar-tools">
      <span>HEADER</span>
      <span flex></span>
      <md-button class="md-raised" ng-click="toggleContent(!displayContent)">onOff</md-button>
      <span flex></span>
      <md-button class="md-raised" ng-click="toggleNum()">half/full</md-button>
    </div>
  </md-toolbar>

  <md-content layout="column" flex>
    <div flex layout="column">
      <div ng-if="displayContent" style="background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim">body card.title</div>
    </div>
    <footer flex="none" style="background-color:orange;color:white;">
      <div>footer item</div>
    </footer>
  </md-content>

codepen

【讨论】：

这解决了桌面上的问题，但移动（无论如何是 ios）它打破了滚动行为。它调整内容 div 的大小以适应屏幕。当我设置一个最小高度来解决这个问题时，页脚会固定在内容的中间。这是一个分叉的codepen。在桌面和移动设备上查看它。有什么想法吗？我更新了我的笔，但我不确定这是否能解决任何问题。没有可用的 ios atm。它适用于android chrome。目前在 angular-material 中有很多关于 ios 问题的未解决问题。你用的是哪个 Safari？我会投赞成票，因为这主要解决了问题。可能我唯一的选择是在 github 上提出错误修复请求。【参考方案3】：

我终于弄清楚了问题所在。在md-content 的主要内容部分下嵌套 div 时，Safari 出现问题。我通过将flex="none" 添加到*** div 来修复它。

这仅适用于 Chrome：

<md-content layout="column" flex>
 <div flex layout="column">
  <section>
    <div ng-if="displayContent" style="min-height:20px;background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim track by $index">card.title
    </div>
  </section>
  <div flex></div>
  <footer flex="none" style="background-color:orange;color:white;">
    <div>footer item</div>
  </footer>
 </div>
</md-content>

这适用于 Chrome 和 Safari：

<md-content layout="column" flex>
 <div flex layout="column">
  <section flex="none">
    <div ng-if="displayContent" style="min-height:20px;background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim track by $index">card.title
    </div>
  </section>
  <div flex></div>
  <footer flex="none" style="background-color:orange;color:white;">
    <div>footer item</div>
  </footer>
 </div>
</md-content>

【讨论】：

@creimers 你的 codepen 与这个解决方案的机制根本没有任何关系

以上是关于Angular Material 固定工具栏和粘页脚的主要内容，如果未能解决你的问题，请参考以下文章

Angular Material select 对固定块有奇怪的作用

如何使用 Angular-Material 获得全高侧导航

Angular 2 Material - 如何有条件地设置工具栏的颜色

Bootstrap 响应式粘页脚

固定汉堡图标角

Angular2 Material Dialog css，对话框大小