Angular Material 固定工具栏和粘性页脚 [英] Angular Material fixed toolbar AND sticky footer

查看：33
本文介绍了Angular Material 固定工具栏和粘性页脚的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

一段时间以来，我一直在努力解决这个问题，并想出了一个解决方案.我想要一个固定的工具栏(导航栏)以及一个粘性(浮动)页脚.页脚应该漂浮在主要部分的底部，但在没有内容时粘在底部.似乎我可以做一个或另一个但不能同时做.使用这种方法，工具栏是固定的，但页脚不粘.当主要部分为空时，它会靠近工具栏.

<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>

</md-工具栏><md-内容><div layout="column" flex><div ng-if="displayContent" style="background-color:SteelBlue;color:white;"ng-repeat="card in card|limitTo: displayLim">body {{card.title}}</div><div style="background-color: red;"flex></div><div style="background-color:orange;color:white;">页脚项目</div>

</md-content>

下面的代码用作粘性页脚，但工具栏也会滚动.

<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>

</md-工具栏><div layout="column" flex><div ng-if="displayContent" style="background-color:SteelBlue;color:white;"ng-repeat="card in card|limitTo: displayLim">body {{card.title}}</div><div style="background-color: red;"flex></div><div style="background-color:orange;color:white;">页脚项目</div>

这似乎是完成我想要做的事情的正确灵活方式，但我无法做到完美.

除了这种方法之外，我还使用了一种更传统的方法，使用 calc(100vh - header - footer) 中计算的主要部分高度来实现粘性页脚.当 BAM .. angular-material 决定让他们的工具栏大小随着视口大小而变化时，我几乎想通了.我可能会提出一个更改请求，以便我可以在 md-content 部分使用间隙填充

但是我想先看看是否有人有更好的解决方案.

解决方案

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

这仅适用于 Chrome:

<div flex layout="column"><部分><div ng-if="displayContent" style="min-height:20px;background-color:SteelBlue;color:white;"ng-repeat="card in card|limitTo: displayLim track by $index">{{card.title}}
</节><div flex></div><footer flex="none" style="background-color:orange;color:white;"><div>页脚项目</div></页脚>
</md-content>

这适用于 Chrome 和 Safari:

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

I have been beating my head against this issue for some time now and sort of came up with a solution. I would like a fixed toolbar (navbar) as well as a sticky (floating) footer. The footer should float at the bottom of the main section but be sticky to the bottom when there is no content. It seems that I can do one or the other but not both. With this method the toolbar is fixed but the footer isn't sticky. It butts up to the toolbar when the main section is empty. 

<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>

The below code works as a sticky footer but then the toolbar scrolls as well. 

<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>

This seems like the proper flex way to accomplish what I'm trying to do but I just cant get it perfect.

Besides this method I have also used a more traditional approach of implementing a sticky footer using calculated main section height from calc(100vh - header - footer). I nearly had it figured out when BAM.. angular-material decided to make their toolbar size change with viewport size. I'm probably going to put in a change request so that I can use a gap filling <div flex></div> in the md-content section but I wanted to find out if anyone has a better solution first.

解决方案

I finally figured out what the issue was. When nesting divs under the main content part of md-content there was an issue on safari. I fixed it by adding flex="none" to the top level div.

This works only on 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>

This works on Chrome and 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>

这篇关于Angular Material 固定工具栏和粘性页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆