带有角度指令、路线、材料的粘性页脚答案

【问题标题】：sticky footer with angular directives, routes, material带有角度指令、路线、材料的粘性页脚
【发布时间】：2015-06-07 17:16:50
【问题描述】：

我正在尝试实现经典的粘性页脚。我正在使用 angular 1.4、ngRoute、ngMaterial 等。我已经尝试过 css 解决方案（设置 wrapper、footer、html、body 100%）以及计算元素高度的 jQuery 函数，但没有什么能完美运行。注意这里我不想给页脚设置一定的高度，然后计算剩余空间。我希望它能够响应我的内容。

1）我们大多数解决方案，当主要内容区域小于高度时，我可以将其粘贴到底部。在这种情况下，主要内容和页脚（正文）之间有一个空白区域。我可以将 body 的背景颜色设置为 ng-view 的颜色，使其看起来相同。我不确定这是否正确。

2) 当主要内容变大时，页脚会丢失（在主要内容后面而不是向下滚动）。这与角度指令或路线有什么关系，还是我错过了其他东西？你可以查看我的plunkr 来查看。单击“主页”以外的任何选项卡，您会看到一个底部带有页脚的空白页面。单击“主页”，页脚将丢失。它实际上就在那里，在内容的背后。 p.s.我不想把我所有的代码都放在这里，它很大。如果您有任何问题，请查看 plunkr 或问我。

<body class="Site" ng-app="personalWebsite" ng-controller="mainController as main" style="display: flex; flex-flow: column nowrap;">

<div class="Site-content">
    <tsafou-nav></tsafou-nav>

    <md-content layout-padding ng-view></md-content>
</div>

<footer>
    <tsafou-footer></tsafou-footer>
</footer>

</body>

*页脚

<div class="footer">
    <p>Design by<span>WOW</span></p>
</div>

我刚刚意识到以下代码适用于 Firefox，但不适用于 chrome！有人可以确认这一点并提出修复建议吗？

<body class="Site" ng-app="personalWebsite" style="display: flex; flex-flow: column nowrap;">
<div class="Site-content">
  <tsafou-nav></tsafou-nav>
  <md-content layout-padding="" ng-view=""></md-content>
</div>
<footer>
  <tsafou-footer></tsafou-footer>
</footer>

【问题讨论】：

标签： html css angularjs angular-routing angular-material

【解决方案1】：

一个选项是使用引导粘性页脚 http://getbootstrap.com/examples/sticky-footer-navbar/

【讨论】：

【解决方案2】：

它与您使用的 Angular Material 库有关，它依赖于 Flexbox。查看this 站点，了解如何使用 Flexbox 框架添加页脚。

为了轻松解决您的问题，您可以在具有“site-content”类的 div 类中移动页脚。如果你想有一些空白空间，你可以尝试在外面设置一个具有最小高度的 div。所以它看起来像这样：

 <body class="Site" ng-app="personalWebsite" style="display: flex; flex-flow: column nowrap;">
    <div class="Site-content">
      <tsafou-nav></tsafou-nav>
      <div  style="min-height: 500px;">
      <md-content layout-padding="" ng-view=""></md-content>
    </div>
    <footer>
      <tsafou-footer></tsafou-footer>
    </footer>
    </div>

【讨论】：

所有解决方案似乎都不起作用。如果我将页脚放在没有设置高度的 div 的“站点内容”中，我只会在正文的末尾得到一个页脚。如果我使用最小高度，那么它不再响应。这个数字取决于屏幕高度。引导粘性页脚也无济于事。它将页脚设置到末尾，但是当向正文添加更多内容时，页脚会丢失在该主要内容后面。有什么想法吗？
你是什么意思它不再响应？最小高度应设置默认高度，以便页脚不直接位于导航下方，但应根据需要垂直增长。如果您打算使用 bootstrap 库，则需要使用 bootstrap 的响应式框架才能使其工作。有几个角度兼容的引导实现 - 如果你走引导路线，我会探索那些。
也许你错过了我在主帖上的编辑。我说这适用于Firefox，但不适用于chrome。在 Firefox 上，页脚位于底部，随着主要内容的增长，页脚向下滚动。另一方面，在 chrome 上，页脚从底部开始，但随着它的增长而落后于主要内容......有什么想法吗？
嗯，当我在 plunkr 上进行操作时，我实际上正在使用 chrome。这可能是缓存问题吗？但是，为了使我的方法起作用，您必须将 md-content 包装在包含 min-height 属性的 div 中，否则您会遇到同样的问题。（我刚刚注意到你更新了你的 plunk）
页脚也必须在“站点”类对象内。