带角度指令，路线，材质的粘性页脚

Question

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

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

2） 当主要内容变大时，页脚将丢失 （移至主要内容后而不是向下滚动）。 这与角度指令或路由有关吗，还是我错过了其他东西？ 您可以检查我的朋克歌手。 单击除“主页”以外的任何选项卡，您会看到一个空白页面，页脚在底部。 单击“主页”，页脚丢失。 它实际上在内容的后面。 ps我不想把我所有的代码都放在这里，它很大。 如果您有任何疑问，请参阅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

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

Answer 2

它与您使用的Angular Material库有关，后者依赖于Flexbox。 查看此站点，了解如何使用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>

带角度指令，路线，材质的粘性页脚

问题描述

2 个解决方案

解决方案1
0 2015-06-07 02:08:35

解决方案2
0 2015-06-07 02:43:55

带角度指令，路线，材质的粘性页脚

问题描述

2 个解决方案

解决方案1 0 2015-06-07 02:08:35

解决方案2 0 2015-06-07 02:43:55

解决方案1
0 2015-06-07 02:08:35

解决方案2
0 2015-06-07 02:43:55