bootstrap 3.x 的粘页脚不起作用答案

【问题标题】：Sticky footer with bootstrap 3.x not workingbootstrap 3.x 的粘页脚不起作用
【发布时间】：2014-04-11 05:50:21
【问题描述】：

我正在尝试为引导程序实现粘性页脚，但它对我不起作用。我有一个 header.php 和一个 footer.php，我将它们包含在我网站的每个页面中。我在这里看到了关于粘性页脚的各种帖子，但它似乎对我不起作用。我看到了一个将 a 和 a 添加到页面正文并相应地修改 css 的示例，但它似乎不起作用。请在下面找到我的代码：

网页.php

<?php
require_once "../includes/essentials.php";
include "../includes/header.php";
?>

<div id="wrap">
<div id="main" class="container">
   Content


<?php include "../includes/footer.php"; ?>

</div>
</div>

页脚.php

<html>
<body>
<div class="footer">
<div class="container">
        <div class="row clearfix">
                <div class="col-md-12 column">
                 Content
                </div>
        </div>
        <div class="row clearfix">
                <div class="col-md-12 column">
                 Content
                </div>
        </div>
        <div class="row clearfix">
                <div class="col-md-12 column">
                Compatible with <a href="http://www.firefox.com">Firefox</a> and <a href="http://www.chrome.com">Chrome</a>.
                </div>
        </div>
</div>
</div>
</body>
</html>

style.css

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
.wrap {
  min-height: 100%;
  margin: 0 auto;
  min-width: 1000px;
}

.main {
  overflow:auto;
  padding-bottom:200px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
  bottom:0;
}

我该如何解决这个问题？即使内容在网页的一半之前结束，我也希望页脚停留在页面底部。

【问题讨论】：

您有包含.main 和.wrap 元素的示例吗？
@pstenstrm - 编辑代码以反映.main 和.wrap 的格式

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

【解决方案1】：

在 CSS 中，您选择 .main 作为类，但在 html 中您输入的 ID 为 <div id="main">。

其次，<div class="footer"> 应该在#wrap 之外，作为兄弟而不是孩子。

<div id="wrap">
    <div id="main">
        // <div id="contnainer"...
    </div>
</div>
<div class="footer">
    // <div id="contnainer"...
</div>

【讨论】：

包裹 div 怎么样？ @pstensrm
对，对不起。编辑了我的答案
无内容时将页脚推到页面下方，有内容时将页脚重叠。 @pstensrm
那是因为您在 html 中有 wrap 和 main 作为 id。您必须将它们更改为类或将 css 选择器更改为 #main {} 和 #wrap {}。

【解决方案2】：

快速解决您的问题的方法是使用 NavBar 作为页脚，然后简单地用您想要的内容填充它。

Bootstrap 组件为 NavBar 提供了 JS 来粘贴到屏幕的顶部或底部。

你可以阅读它here

【讨论】：