页脚引导程序的问题答案

【问题标题】：Problems with footer bootstrap页脚引导程序的问题
【发布时间】：2015-11-24 13:05:10
【问题描述】：

我正在使用 Twitter Bootstrap，是否有任何页脚类？因为我不能让它停留在底部。这是我的 jsfiddle https://jsfiddle.net/fNPvf/18578/。这是页脚 CSS：

.footer-no-nav {
    border-top: 1px solid #C2B8B8;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}

这是我使用引导类 navbar-fixed-bottom 时的图片

这是调整窗口大小的时间：

解决了我的问题，不需要任何 navbar-fixed-bottom：

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

【问题讨论】：

标签： html css twitter-bootstrap footer

【解决方案1】：

添加navbar-fixed-bottom 类以将其固定到底部，如下所示：

<footer class="footer-no-nav navbar-fixed-bottom" role="contentinfo">
    <!--content-->
</footer>

NB您必须为页脚 div 提供背景色，并添加与页脚高度相等的 margin-bottom，以防止元素被页脚覆盖。

【讨论】：

当我让他固定时，他会在调整窗口大小时跳转到其他内容。
这是一个添加了上述类名的 jsfiddle：jsfiddle.net/AndrewL32/fNPvf/18583 在调整 @McLaren 的大小时，我似乎找不到您所指的这种跳跃
看图片i.stack.imgur.com/LZ7FE.jpg 根本看不到内容：D
背景颜色是可选的。但是body的margin-bottom是必须的。
有一个技巧是不允许页脚跳转到其他内容。在页脚前使用少量
，因此即使页脚被调整到非常小的大小，它也不会覆盖您的页面内容。

【解决方案2】：

这适用于我的网页

<div class="panel-footer navbar-inverse navbar-fixed-bottom">

【讨论】：

您不需要使用 navbar-inverse 类，它只是用于不同颜色的页脚。
它仍然是固定的。我不希望它被修复。 ://

【解决方案3】：

尝试为所有包含添加 div

.all    {
    min-height:750px;

    }

这是您的页脚链接https://jsfiddle.net/fNPvf/18587/

【讨论】：

【解决方案4】：

我刚刚解决了我的问题，不需要任何 navbar-fixed-bottom：

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

【讨论】：

【解决方案5】：

听起来你在寻找一个粘性页脚。

在这里更新小提琴：https://jsfiddle.net/fNPvf/18589/

css 依赖于从margin-top 中删除页脚的总高度，以使页脚粘在底部，除非有足够的内容将其推得更远。对于 40px 高度 + 1px 边框顶部页脚，这将计算出我们的 margin-top 等于 -41px。

footer {
    border-top: 1px solid #C2B8B8;
    height:40px;
    margin-top:-41px;
}

body,html{
    height:100%;
}
.container{
    min-height:100%;
}

<body>
  <div class="container">main content can go here</div>
  <footer>sticky footer content is stuck here</footer>
</body>

【讨论】：