<分区>
我想实现一个看似足够简单的布局，但我的 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%;
}