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

Question

I am trying to implement the classical sticky footer. 我正在尝试实现经典的粘性页脚。 I am using angular 1.4, ngRoute, ngMaterial etc. I have tried css solutions (setting wrapper, footer, html, body 100%) and also jQuery functions that calculate the height of the element, but nothing works flawlessly. 我正在使用angular 1.4，ngRoute，ngMaterial等。我尝试了CSS解决方案（设置包装器，页脚，html，正文100％）以及用于计算元素高度的jQuery函数，但没有任何问题可以完美地工作。 Note here that I don't want to set a certain height for the footer and then calculate the remaining space. 请注意，我不想为页脚设置某个高度，然后计算剩余空间。 I want it to be responsive to my content. 我希望它能够响应我的内容。

1) We most solutions, I am able to stick it to the bottom when the main content area is smaller that the height . 1）我们大多数解决方案， 当主要内容区域小于高度时 ，我可以将其粘贴到底部。 In this case, there is an empty area between the main content and the footer (body). 在这种情况下，主要内容和页脚（正文）之间存在空白区域。 I can set the body's background color equal to the color of the ng-view so that it looks the same. 我可以将主体的背景色设置为与ng-view的颜色相同，以使其看起来相同。 I am not sure though if this is correct. 我不确定这是否正确。

2) When the main content gets bigger, the footer is lost (goes behind the main content instead of scrolling down). 2） 当主要内容变大时，页脚将丢失 （移至主要内容后而不是向下滚动）。 Does this has anything to do with angular directives or routes, or am I missing something else? 这与角度指令或路由有关吗，还是我错过了其他东西？ You can check my plunkr to see. 您可以检查我的朋克歌手。 Click on any tab other than 'home' and you see an empty page with the footer on bottom. 单击除“主页”以外的任何选项卡，您会看到一个空白页面，页脚在底部。 Click on 'home' and the footer is lost. 单击“主页”，页脚丢失。 It is actually there, behind the content. 它实际上在内容的后面。 ps I don't want to put all my code here it's pretty big. ps我不想把我所有的代码都放在这里，它很大。 If you have any questions please see plunkr or ask me. 如果您有任何疑问，请参阅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>

*Footer *脚

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

I just realized that the following code works on firefox but not on chrome! 我只是意识到以下代码可在firefox上使用，而不能在chrome上使用！ Can someone confirm that and suggest a fix? 有人可以确认并提出解决方案吗？

<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

It's related to the Angular Material library you are using, which relies on Flexbox. 它与您使用的Angular Material库有关，后者依赖于Flexbox。 Review this site for how to add a footer using the Flexbox framework. 查看此站点，了解如何使用Flexbox框架添加页脚。

To easily fix your problem, you can move the footer within the div class that has the 'site-content' class. 为了轻松解决问题，您可以在具有“ site-content”类的div类中移动页脚。 If you want to have some empty space, you can try setting a div outside that has a min height. 如果要有一些空白空间，可以尝试在具有最小高度的外部设置div。 So it would look like this: 所以它看起来像这样：

 <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