javascript - HTML、Bootstrap 和 CSS 3

Question

我想将页脚放在页面底部。如果页面足够长，我想滚动到页脚。如果页面太短，我仍然希望页脚位于视口(viewport)的最底部。我不介意空白。

我怎样才能尽可能轻松地实现这一目标？

我尝试了navbar-static和nav-barfixed，但它们都没有达到我想要的效果。用间隔符 div 填充空间是唯一的方法，还是有使用 CSS3 或某些 javascript 的更优雅的方法？

接受任何和所有的想法/建议。

这是我的 HTML。没什么特别的，因为我尝试了 position:absolute;bottom:0px; 并将页脚放在较短页面的底部，但在较长页面中，底部悬卡在页面重叠内容的中间。

此代码将页脚放在页面底部，但在比窗口/视口(viewport)短的页面中，页脚排序卡在中间(在内容的末尾)。

.body
{
height: 100%;
}    
.bottomMenu 
    { 
        background-color: @backgroundColor;
        border-top: solid 1px (@backgroundColor - #292929);
    }

Answer 1

这是一个example来自官方 Bootstrap 文档。

这是代码:

HTML

<footer class="footer">
  <div class="container">
    <p class="text-muted">Place sticky footer content here.</p>
  </div>
</footer>

CSS

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;
}