如何让小页面填满浏览器的高度，使页脚位于底部而不是中间
例如
<body>
<div data-offcanvas class="off-canvas-wrap">
<div class="inner-wrap">
<%= render 'layouts/navigation' %>
<section class="main-section">
<%= render 'layouts/messages' %>
<div class="row">
<div class="large-12 columns">
<%= yield %>
</div>
</div>
</section>
<div class="footer-bottom">
<div class="row">
<div class="small-12 columns small-centered text-center">
<ul class="footer-links">
<li><a href="#">About</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
<p class="copyright">© 2011–2014 Acme, Inc. All rights reserved.</p>
</div>
</div>
</div>
<a class="exit-off-canvas"></a>
</div>
</div>
<%= javascript_include_tag "application" %>
<script>$(document).foundation();</script>
</body>
当产量较小时，页脚最终会出现在页面中间。我同意页脚在底部，我也同意它在一堆内容之后，所以滚动没问题。我已经搜索过，大多数人都想要一个粘性页脚，这不是我想要的。我并不总是希望它位于底部，我只希望每个页面的高度至少为 1 页。
我怎样才能做到这一点？
最佳答案
像这样:
CSS
html,
body,
.off-canvas-wrap,
.inner-wrap {
position: relative;
min-height: 100%;
}
.inner-wrap {
padding-bottom: [hight of your footer]px;
}
.footer-bottom {
position: absolute;
bottom: 0px;
}
注意:您使用的 class="" 是错误的。独特的元素应该使用 id=""，如果你挑剔的话:-)
关于html - 使小页面填满浏览器高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24984739/