角材料固定工具栏和粘页脚

毕富

2023-03-14

问题内容：

我已经对这个问题打了一段时间，并提出了解决方案。我想要一个固定的工具栏（navbar）以及一个粘性（浮动）页脚。页脚应漂浮在主要部分的底部，但在没有内容时应粘在底部。看来我可以做一个，但不能两个都做。通过这种方法，工具栏是固定的，但页脚不粘。当主要部分为空时，它会紧靠工具栏。

<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
..角材料决定使它们的工具栏大小随视口大小而变化时，我几乎弄清楚了。我可能会提出变更请求，以便可以<div flex></div>在本md- content节中使用空白，但我想先找出是否有人有更好的解决方案。

问题答案：

我终于弄清楚了问题所在。在div的主要内容部分嵌套时，md- content存在关于野生动物园的问题。我通过添加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>

角材料固定工具栏和粘页脚

相关阅读

相关文章

相关问答

相关工具

相关文档