个人中心
gpt4 book ai didi

angularjs - Angular Material 固定工具栏和粘页脚

转载 作者：行者123 更新时间：2023-12-04 00:41:28 24 4
gpt4 key购买 nike

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

<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 决定使他们的工具栏大小随视口(viewport)大小而变化时，我几乎已经弄清楚了。我可能会提出更改请求，以便我可以使用空白填充 <div flex></div>在 md-content部分，但我想先了解是否有人有更好的解决方案。

最佳答案

我终于弄清楚了问题所在。在 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>

关于angularjs - Angular Material 固定工具栏和粘页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34720648/

24 4 0
文章推荐： r - 在 R 中绘制球体上的点
文章推荐： foreign-keys - 使用 Entity Framework 7 的流体 API 创建 optional 外键
文章推荐： ember.js - 将服务注入(inject) Ember 对象 [不是 Ember Controller ]
文章推荐： azure - 如何更新 Azure PowerShell？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com