粘滯的頁腳沒有粘在AngularJS中
[英]Sticky footer not sticking in AngularJS
問題描述
我工作一個有角度的網站，我試圖在所有視圖中實現粘性頁腳，但當內容超出窗口大小並且滾動條出現時，頁腳停止粘貼。 我嘗試了很多不同的東西，比如在我的所有內容中添加一個包裝器，添加一個.push div，但似乎沒什么用。 有沒有人遇到這個問題並修復它或知道某種插件等我可以用來做這個工作？
這是我的代碼：
<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>
而我的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;
}
歡迎和贊賞任何和所有建議，我也願意嘗試jQuery / javascript workarounds，基本上任何有用的東西！
5 個解決方案
解決方案1
12 已采納 2014-10-04 23:03:47
還有Bootstrap解決方案 ，它不需要安裝Bootstrap框架，只需要以下結構：
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：
/* 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;
}
下面是一個工作小提琴 ，長文本顯示頁面滾動時的行為。
解決方案2
1 2016-09-26 03:44:51
在角度材料> 1.0中對我有用的唯一解決方案如下
CSS
body {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.main{
flex-grow: 1;
overflow: auto;
min-height: 2em;
}
HTML
<body >
<navbar></navbar>
<div class="main" ui-view=""></div>
<footer></footer>
</body>
解決方案3
0 2015-04-08 17:55:41
我發現解決方案使用帶有window.innerHeight Javascript，並設置marginTop和marginBottom 。 我希望這對你有幫助。
解決方案4
0 2015-08-14 10:58:38
這是一個角度指令，用於構建從此頁面獲取的角度粘性頁腳： 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));
解決方案5
0 2016-08-11 11:38:21
(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);
});
}
};
})
}());
這會將您的頁腳放在底部（60px用於放置元素本身，如果它更長，則可能需要調整它）。 你需要在頁腳元素上有css屬性“position：absolute”。 調整窗口大小或在運行時出現新元素時，它仍應位於底部。
突出在粘頁腳下方的背景圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.