javascript 粘性页脚不粘在 AngularJS 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26197743/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sticky footer not sticking in AngularJS
提问by Saleh
Im working an angular site and im trying to implement a sticky footer across all views but the footer stops sticking when content exceeds the size of the window and the scrollbar appears. I've tried a bunch of different things, like adding a wrapper around all my content, adding a .push div but nothing seems to work. Has anyone come across this problem and fixed it or know some kind of plugin etc. I can use to make this work?
我正在工作一个有角度的网站，我试图在所有视图中实现一个粘性页脚，但是当内容超过窗口大小并且出现滚动条时，页脚停止粘贴。我尝试了很多不同的东西，比如为我的所有内容添加一个包装器，添加一个 .push div 但似乎没有任何效果。有没有人遇到过这个问题并修复它或知道某种插件等。我可以用它来完成这项工作吗？
Here is my code:
这是我的代码：
<body ng-app="noteSnapApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div style="min-height: 55px;" ng-controller="NavCtrl" class="navbar navbar-default navbar-static-top ns-navbar ns-hide-nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">NoteSnap</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a style="padding: 0" class="navbar-brand" href="/feed"><img class="img-responsive" src="images/notesnap_logo.png" width="165"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li ng-hide="logoutBtn" class="ns-logout"><a ng-click="logOut()" href="">Logout</a></li>
</ul>
</div>
</div>
</div>
<div ng-view></div>
<div class="banner-footer">
<a href="http://bit.ly/1ul3gG7"><img class="img-responsive" src="images/banner.png" width="100%"></a>
</div>
<div id="fb-root">
</div>
</body>
And my css:
还有我的 css：
html, body {height: 100%;}
html{
font-family: 'museo_sans100';
color: #333333;
position: relative !important;
min-height: 100%;
}
body {
background-color: transparent;
margin-bottom: 90px;
}
.banner-footer {
position: fixed;
bottom: 0;
width: 100% ;
height: 90px;
clear: both;
}
Any and all suggestions are welcome and appreciated, im also willing to try jQuery/javascript workarounds, basically anything that works!
欢迎和赞赏任何和所有建议，我也愿意尝试 jQuery/javascript 解决方法，基本上任何可行的方法！
回答by jsfrocha
There is also the Bootstrap solution, which doesn't really need the Bootstrap framework installed, just the following structure:
还有Bootstrap 解决方案，它并不真正需要安装 Bootstrap 框架，只需以下结构：
HTML:
HTML：
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
</div>
<div class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</div>
CSS:
CSS：
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .text-muted {
margin: 20px 0;
}
Heres a working Fiddlewith long text to show behavior when page scrolls.
回答by Uma Maheshwaraa
The only solution that worked for me in angular material >1.0 is below
在角材料> 1.0中对我有用的唯一解决方案如下
CSS
CSS
body {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.main{
flex-grow: 1;
overflow: auto;
min-height: 2em;
}
Html
html
<body >
<navbar></navbar>
<div class="main" ui-view=""></div>
<footer></footer>
</body>
回答by Eisson
I found the solution working from Javascript with window.innerHeightand set marginTopand marginBottomtoo. I hope this help you.
我找到了解决办法从Javascript正与window.innerHeight和集marginTop和marginBottom了。我希望这对你有帮助。
回答by checkmate711
Here is a angular directive that builds the sticky footer for angular as taken from this page: https://github.com/incuna/angular-sticky-footer/blob/master/angular-sticky-footer.js
这是一个角度指令，它为这个页面中的角度构建粘性页脚：https: //github.com/incuna/angular-sticky-footer/blob/master/angular-sticky-footer.js
<body>
<div class="wrapper">
<!-- All other content in here. -->
</div>
<div class="footer" sticky-footer=".wrapper"></div>
</body>
(function (angular) {
'use strict';
var module = angular.module('sticky-footer', []);
module.directive('stickyFooter', [
'$timeout',
function ($timeout) {
return {
restrict: 'A',
link: function (scope, iElement, iAttrs) {
var stickyFooterWrapper = $(iAttrs.stickyFooter);
// Quite often you will occur a few wrapping `<div>`s in the
// top level of your DOM, so we need to set the height
// to be 100% on each of those. This will also set it on
// the `<html>` and `<body>`.
stickyFooterWrapper.parents().css('height', '100%');
stickyFooterWrapper.css({
'min-height': '100%',
'height': 'auto'
});
// Append a pushing div to the stickyFooterWrapper.
var stickyFooterPush = $('<div class="push"></div>');
stickyFooterWrapper.append(stickyFooterPush);
var setHeights = function () {
var height = iElement.outerHeight();
stickyFooterPush.height(height);
stickyFooterWrapper.css('margin-bottom', -(height));
};
$timeout(setHeights, 0);
$(window).on('resize', setHeights);
}
};
}
]);
}(window.angular));
回答by vvn050
(function () {
'use strict';
angular.module('myApp').directive('footerStick', function () {
return {
restrict: "E",
templateUrl: "app/somewhere/footer.html",
link: function (scope, el, attrs) {
var win = angular.element($('html'));
scope.$watch(function () {
return win[0].offsetHeight;
},
function (newValue, oldValue) {
var newHeight = newValue + 60;
$(el[0].firstElementChild).css('top',newHeight);
});
}
};
})
}());
This would place your footer at the bottom (with 60px for placing the element itself, if it is longer you may have to adjust it). You need to have css property "position:absolute" on the footer element. When window is resized or new elements appear at run time, it still should be on the bottom.
这会将您的页脚放在底部（60px 用于放置元素本身，如果它更长，您可能需要调整它）。您需要在页脚元素上拥有 css 属性“position:absolute”。在运行时调整窗口大小或出现新元素时，它仍应位于底部。
