引导底部粘性页脚与站点重叠

Question

我正在使用以下标记来创建底部版权横幅

<footer class="footer">
    <div class="container">
        <p class="text-muted">© Some Company</p>
    </div>
</footer>

这里是 CSS

 /*         Sticky footer styles
      -------------------------------------------------- */
    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;
    }


    /* Custom page CSS
    -------------------------------------------------- */
    /* Not required for template or sticky footer method. */

    body > .container {
      padding: 60px 15px 0;
    }
    .container .text-muted {
      margin: 20px 0;
    }

    .footer > .container {
      padding-right: 15px;
      padding-left: 15px;
    }

    code {
      font-size: 80%;
    }

问题在于它与网站内容的底部重叠。

如何强制它往下走？

我对这个 CSS 不满意

  .navbar-fixed-bottom {
       padding-top: 10px;  
       height: 5%;
    }

Answer 1

增加内容容器的底部填充。

如果这是页面内容的规则（我不知道，因为你没有发布页面的完整 HTML 结构）...

body > .container {
      padding: 60px 15px 0;
    }

...然后将最后一个“0”更改为至少 60px（尝试不同的值）：

body > .container {
      padding: 60px 15px 80px;
    }

Answer 2

 html {
      position: relative;
      min-height: 100%;
    }
    body {
      /* Margin bottom by footer height */
      margin-bottom: 60px;
    }
    .footer {

      position: absolute;
      /*this controls how far bottom the banner goes*/
      top: 110%; <---- THIS WAS THE MISSIN PIECE
      bottom: 0;
      width: 100%;
      /* Set the fixed height of the footer here */
      height: 60px;
      background-color: #f5f5f5;
    }


    /* Custom page CSS
    -------------------------------------------------- */
    /* Not required for template or sticky footer method. */

    body > .container {
      padding: 60px 15px 0;
    }
    .container .text-muted {
      margin: 20px 0;
    }

    .footer > .container {
      padding-right: 15px;
      padding-left: 15px;
    }

    code {
      font-size: 80%;
    }

Answer 3

尝试在页面底部添加边距并在 .footer CSS 类中设置 position: fixed;：

body {
 margin-bottom: 50px;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
}

这是working example of your code 和example from the bootstrap documentation。