我正在工作的角度網站和即時通訊嘗試實現跨所有視圖的粘腳,但當內容超出窗口大小和滾動條出現時,頁腳停止粘貼。我已經嘗試了一堆不同的東西,比如在我的所有內容中添加一個包裝,添加一個.push div,但似乎沒有任何工作。有沒有人遇到這個問題,並修復它或知道某種插件等我可以用來使這項工作? 粘性頁腳不粘在AngularJS
這裏是我的代碼:
<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的解決方法,基本上任何作品!
它相對定位成由於視口'固定'定位。在這種情況下,嘗試使用'absolute'來代替'',這是最靠近的祖先,它的位置是'relative'。 – 2014-10-04 22:25:15
沒有任何例子使用角材料1.0。我有同樣的問題,其中頁腳在初始化時貼在底部,但當內容長度超過屏幕高度時,它會一直滾動。 – 2016-09-26 03:14:53