我想实现,似乎是一个足够简单的布局,但我的 CSS 有奇怪的问题。
我真正需要的有 3 个部分:
1)我想要一个在用户滚动时始终可见的粘性导航栏(如 twitter.com)
2)对于我的页脚,无论内容的高度是多少,我都希望它始终刷新到页面底部。(注意:不是粘页脚,只是一直刷新到页面底部,或者内容下方有很多内容)。
3)最后,这就是我真正陷入困境的地方。我希望我的内容区域(在页眉/页脚之间)是可见区域的 100%,除非有更多内容,在这种情况下它会像往常一样滚动。
例如,我的主页引用很长,所以这不是问题,但其他内容页面较小,但需要某些重复的背景图像等应该填满整个屏幕,但似乎总是只填满它们的实际空间。
编辑(包括 HTML 和 CSS)
我正在使用 AngularJS(因此是 ng-view)。
这个项目很大,我一直在尝试修复 CSS,以便可以发布:
<body>
<div class="wrapper">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="#/area1">LINK 1</a></li>
<li><a href="#/area2">LINK 2</a></li>
</ul>
<a class="logoLink" href="#/">
<img class="headerLogo" src="static/img/logo.png" >
</a>
</div>
</div>
</div>
<div class="container-fluid full-height">
<div class="row-fluid full-height">
<div class="span12 full-height" ng-view>
</div>
</div>
</div>
<div class="push"></div>
</div>
<div class="footer">
Footer goes here
</div>
</body>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
}
.footer, .push {
height: 142px;
}
.footer {
background: #1D1D1B;
color: white;
}
.container-fluid {
padding: 0;
padding-top: 81px;
}
.full-height {
height: 100%;
min-height: 100%;
}