Html 带有角度指示、路线、材质的粘性页脚
我正在尝试实现经典的粘性页脚。我正在使用angular 1.4、ngRoute、ngMaterial等。 我尝试过css解决方案（设置包装器、页脚、html、正文100%）以及计算元素高度的jQuery函数，但没有一个能完美工作。请注意，我不想为页脚设置一定的高度，然后计算剩余空间。我希望它能够响应我的内容 1） 对于大多数解决方案，当主要内容区域小于高度时，我可以将其粘贴到底部。在这种情况下，主内容和页脚（正文）之间有一个空白区域。我可以将主体的背景色设置为ng视图的颜色，使其看起来相同。但我不确定这是否正确 2） 当主内容变大时，页脚将丢失（位于主内容后面，而不是向下滚动）。这是否与角度指令或路线有关，或者我是否遗漏了其他内容？ 你可以查我的房间看看。单击“主页”以外的任何选项卡，您会看到底部有页脚的空白页面。单击“主页”，页脚将丢失。它实际上就在那里，在内容的后面。 p、 我不想把我所有的代码都放在这里，它太大了。如果您有任何问题，请咨询plunkr或询问我Html 带有角度指示、路线、材质的粘性页脚,html,css,angularjs,angular-routing,angular-material,Html,Css,Angularjs,Angular Routing,Angular Material,我正在尝试实现经典的粘性页脚。我正在使用angular 1.4、ngRoute、ngMaterial等。 我尝试过css解决方案（设置包装器、页脚、html、正文100%）以及计算元素高度的jQuery函数，但没有一个能完美工作。请注意，我不想为页脚设置一定的高度，然后计算剩余空间。我希望它能够响应我的内容 1） 对于大多数解决方案，当主要内容区域小于高度时，我可以将其粘贴到底部。在这种情况下，主内容和页脚（正文）之间有一个空白区域。我可以将主体的背景色设置为ng视图的颜色，使其看起来相同。但我
<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>
设计byWOW
<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>
一个选项是使用引导粘性页脚
它与您正在使用的角度材质库相关，该库依赖于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>