使用 Bootstrap 停靠页脚答案

【问题标题】：Docking footers with Bootstrap使用 Bootstrap 停靠页脚
【发布时间】：2014-12-15 22:35:55
【问题描述】：

假设我有以下“模板”，我的一个页面应该是什么样子：

我的页面由页眉、内容部分（每页不同）和页脚组成。页面高度是页眉高度 + 内容高度 + 页脚高度。注意页脚的高度；它很高/很结实。这个我没问题。

我不想要“粘性”页脚，而是寻找以下功能：

如果页眉高度 + 内容高度大于视口/窗口高度，我不希望页脚在用户向下滚动到它之前可见（正常页脚行为）；但是...
如果页眉高度 + 内容高度 + 页脚高度小于视口/窗口高度，我希望页脚固定在视口底部。这意味着如果特定页面的内容非常小甚至完全为空，我希望我的页眉固定在窗口顶部，而页脚固定在底部。

Example in jsFiddle

我需要做些什么来更改我的footer div 以显示所需的行为？

<!-- What needs to change here? -->
<div class="footer ">
    This should always be shown at the bottom if there isn't a lot of content to display below the header.
</div>

【问题讨论】：

标签： html css twitter-bootstrap footer sticky-footer

【解决方案1】：

这是另一个简单的解决方案

HTML

    <body>
    <header>
     ....
    </header>
    <div class="container" role="main">
     ....
    </div>
    <footer>
     ....
    </footer>
    </body>

(function ($) {

        var height = $('footer').height();
        //update the  value when page is loaded
        $(document).ready(function () {
        $('body').css({"margin-bottom" : height });

        });

        //update the  value when the browser is resized (useful for devices which switch from portrait to landscape)
        $(window).resize(function () {
        $('body').css({"margin-bottom" : height });
        });

    })(jQuery);

CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
[role="main"] {
    padding-bottom:30px;
}

【讨论】：

谢谢@Schneider (+1) - 请在 KyleMit 的回答下方查看我的问题 - 我有同样的问题要问你！再次感谢！

【解决方案2】：

我认为粘性页脚正是你想要的（只是不是fixed 页脚）

直接取自维基sticky-footer：

Sticky Footer 是一种 CSS 技术，用于将页脚部分锚定到页面底部，无论页面高度如何。当页面高度小于视口时，Sticky Footer 将位于视口底部，当页面高度大于视口时，Sticky Footer 将位于页面底部。

这是规范的粘滞页脚实现：
http://ryanfait.com/html5-sticky-footer/

这是一个简单的例子：

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}
.footer, .push {
  height: 4em;
}

.footer {
  background: yellow;
}

如果你想使用引导程序，只需添加引导程序 CSS 和任何其他你想要的类

Simple Demo in Plunker

Bootstrap Demo in Plunker

【讨论】：

感谢@KyletMit (+1) - 我想我有点惊讶 Bootstrap 没有提供开箱即用的功能。在您的 Plunker 示例中，在style.css 中，我没有实际实现这种“粘性”的 CSS。 什么代码实际上将页脚“粘贴”到窗口/视口的底部？再次感谢！
粘页脚的东西是.wrapper 占据屏幕的 100% 减去页脚的固定高度，通过 margin-bottom 设置。然后页脚正好占据那个高度。 Bootstrap 不需要在一个库中提供所有 Web 开发技巧。事实上，它需要有一个特定的重点，以防止变得臃肿。如果某个工具已经存在，那么让开发人员继续使用它而不是吸收它是完全没问题的。
@smeeb - bootstrap 不提供可变高度的粘性页脚、响应式标签、3 级或更多导航级别以及许多开箱即用的东西，这取决于开发人员来扩展功能他们需要而不是臃肿的框架，根据定义，框架就是框架，而不是完成的建筑。