页脚问题 bootstrap

Question

我正在使用 Twitter Bootstrap，页脚有 classes 吗？因为我不能让它留在底部。这是我的 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;
}

这是我使用时的图片 bootstrap class navbar-fixed-bottom

这是 window 调整大小时的情况：

解决了我的问题，不需要任何 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;
}

Answer 1

添加 navbar-fixed-bottom class 固定在底部，如下所示：

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

N.B. 您必须为页脚提供背景色 div 并添加一个 margin-bottom 相当于高度以防止元素被页脚覆盖。

Answer 2

这适用于我的网页

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

Answer 3

尝试为所有包含

添加 div

.all    {
    min-height:750px;

    }

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

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

Answer 5

听起来您正在寻找粘性页脚。

已更新 fiddle 此处：https://jsfiddle.net/fNPvf/18589/

css 依赖于从 margin-top 中删除页脚的总高度以使页脚粘在底部，除非有足够的内容将其推得更远。对于 40px 高度 + 1px border-top 页脚，这将计算我们的 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>

页脚问题 bootstrap

Problems with footer bootstrap

html

css

twitter-bootstrap

footer