Question

使用Bootstrap 3.3.7

我希望页脚始终在浏览器窗口的最底部对齐。

我不想要使用“粘性页脚”，因为我不希望它覆盖我的任何内容。

当页面有足够的内容时，它看起来没问题，但是当它没有时它只是在屏幕上随机出现。

标记示例：

<body>
    <div class="container">
      <div class="row">
      <h1>My page</h1>
      <p>Page content here</p>
      </div>
    </div>

    <footer>
        <div class="container">
            <div class="row"><p>Footer content here</p></div>
        </div>
    </footer>
</body>

如果页面正文中有足够的内容，那就没关系。但对于短篇页面则不然。

我正在使用默认导航栏的默认高度

<nav class="navbar navbar-static-top navbar-inverse">

</nav>

我已经找到了解决方案，但似乎都没有效果。无法理解为什么Bootstrap让这么复杂的事情做这么简单的任务。不是每个人都想要一个粘性页脚！

Answer 1

如果你不关心IE＆lt; 10你可以使用flex。它非常简单，但正如前面提到的那样，只适用于“现代”浏览器。

HTML：

<body>
    <main>
        <!-- main content goes here -->
    </main>
    <footer>

    </footer>
</body>

CSS：

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

Answer 2

如果您将身高设置为100％并移除了页脚高度

，则可以执行此操作

html, body {
        height: 100%;
    }

.content {
        height: calc(100vh - 150px);
        height: -o-calc(100vh - 150px); /* opera */
        height: -webkit-calc(100vh - 150px); /* google, safari */
        height: -moz-calc(100vh - 150px); /* firefox */
    }

.content {
    background-color:red;
    width: 100%;
    min-height: 500px;

}

.footer{
  background-color:green;
  height:150px;
}

在jsfiddle

上查看我的代码

尝试改变

>   min-height: 500px;

到

> min-height: 200px;

在

> ".content"

看到差异

如果页面上没有足够的内容，如何使页脚返回到底部

2 个答案: