css - Bootstrap 底部粘性页脚与网站重叠

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