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

$multiArr[]=[$arr1['value'],$arr2['value2']];

Answer 3

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

body {
 margin-bottom: 50px;
}

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

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

bootstrap底部粘性页脚与网站重叠

3 个答案: