粘滞的页脚没有粘在AngularJS中
Sal*_*leh 7 html javascript css 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,基本上任何有效的!
jsf*_*cha 12
还有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;
}
下面是一个工作小提琴,长文本显示页面滚动时的行为.
| 归档时间： |
|
| 查看次数： |
12148 次 |
| 最近记录： |