Question

我正在使用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;
}

这是我使用bootstrap类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;
}

Answer 1

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

听起来像是在追寻粘性页脚。

此处更新了小提琴：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>

Answer 3

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

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

NB 您必须为页脚div提供背景颜色，并添加等效于页脚高度的margin-bottom，以防止页脚覆盖元素。< / p>

Answer 4

这项工作适用于我的网页

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

Answer 5

尝试为所有包含

添加div

.all    {
    min-height:750px;

    }

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

的链接

页脚引导程序的问题

5 个答案: