Question

我正在尝试实现经典的粘性页脚。我使用角度1.4，ngRoute，ngMaterial等。我已经尝试过css解决方案（设置包装器，页脚，html，正文100％）以及计算元素高度的jQuery函数，但没有任何工作完美无瑕。请注意，我不想为页脚设置一定的高度，然后计算剩余空间。我希望它能够响应我的内容。

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

2）当主要内容变大时，页脚会丢失（在主要内容后面而不是向下滚动）。这与角度指令或路线有什么关系，还是我错过了其他的东西？您可以查看我的plunkr以查看。单击“主页”以外的任何选项卡，您会看到一个空页，页脚位于底部。点击“主页”，页脚丢失。它实际上就在内容之后。附：我不想把我的所有代码放在这里它非常大。如果您有任何疑问，请参阅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>

Answer 1

一种选择是使用bootstrap粘性页脚 http://getbootstrap.com/examples/sticky-footer-navbar/

Answer 2

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

要轻松解决您的问题，您可以在包含＆＃39;网站内容＆＃39;的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>

具有角度指令，路线，材料的粘性页脚

2 个答案: