Fatal编程技术网
  • css/
  • Css 使用Twitter引导使页脚粘到页面底部 我有一些网页没有很多内容，页脚坐在页面的中间，但我希望它在底部。p> <div class="fixed-bottom">...</div>

Css 使用Twitter引导使页脚粘到页面底部 我有一些网页没有很多内容，页脚坐在页面的中间，但我希望它在底部。p> <div class="fixed-bottom">...</div>

css twitter-bootstrap

Css 使用Twitter引导使页脚粘到页面底部 我有一些网页没有很多内容，页脚坐在页面的中间，但我希望它在底部。p> <div class="fixed-bottom">...</div>,css,twitter-bootstrap,Css,Twitter Bootstrap,我把我所有的书页都放在一个“夹”里了 <div class="fixed-bottom">...</div> 然后对我的页脚使用以下CSS ul.footer { margin-top: 10px; text-align: center; } ul.footer li { color: #333; display: inline-block; } #footer { bottom: -50px; height: 50px; l

我把我所有的书页都放在一个“夹”里了

<div class="fixed-bottom">...</div>
然后对我的页脚使用以下CSS

ul.footer {
  margin-top: 10px;
  text-align: center;
}

ul.footer li {
  color: #333;
  display: inline-block;
}

#footer {
  bottom: -50px;
  height: 50px;
  left: 0;
  position: absolute;
  right: 0;
}

<div class="container">
  <div class="row">
    <div class="span12">
      <div id="footer">
        <ul class="footer">
          <li>Website built by <a href="#">Fishplate</a></li>&nbsp;&nbsp;
          <li>Email:exampleemail@gmail.com</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="fixed-bottom">...</div>
我的页脚的html

ul.footer {
  margin-top: 10px;
  text-align: center;
}

ul.footer li {
  color: #333;
  display: inline-block;
}

#footer {
  bottom: -50px;
  height: 50px;
  left: 0;
  position: absolute;
  right: 0;
}

<div class="container">
  <div class="row">
    <div class="span12">
      <div id="footer">
        <ul class="footer">
          <li>Website built by <a href="#">Fishplate</a></li>&nbsp;&nbsp;
          <li>Email:exampleemail@gmail.com</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="fixed-bottom">...</div>      



    

  • 网站由
    • 

  • 电邮：exampleemail@gmail.com
    •
我希望页脚保持流畅。

<div class="fixed-bottom">...</div>
这应该能解决你的问题

<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
Your content here.
</div>
</div>
</div>
</div>
<footer class="footer" style="background-color:#c2c2c2">
</footer>

<div class="fixed-bottom">...</div>
正如在基于此解决方案的代码的注释中所讨论的：

<div class="fixed-bottom">...</div>
此解决方案的关键部分之一是将
height:100%
添加到
html，body
，这样
#footer
元素就有了一个基准高度，您的代码中就没有这个高度：

html,body{
    height: 100%
}

<div class="fixed-bottom">...</div>
您还会发现，使用
bottom:-50px
时会遇到问题，因为这会在内容不多的情况下将您的内容推到后台。您必须将
页边距底部：50px
添加到
#页脚之前的最后一个元素中

只需将类导航栏固定底部添加到页脚中即可

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

<div class="fixed-bottom">...</div>
引导程序4的更新-

<div class="fixed-bottom">...</div>
正如Sara Tibbetts所提到的，阶级是固定的

<div class="footer fixed-bottom">

<div class="fixed-bottom">...</div>
以下是使用css3的示例：

<div class="fixed-bottom">...</div>
CSS:

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

<div class="fixed-bottom">...</div>
HTML:

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

<div class="fixed-bottom">...</div>      


正文内容。。。。
页脚内容。。。。

充分利用引导类<代码>导航栏静态底部将其保留在底部

<div class="navbar-static-bottom" id="footer"></div>

<div class="fixed-bottom">...</div>
上述大多数解决方案对我来说都不起作用。但是，下面给出的解决方案效果很好：

<div class="fixed-bottom">...</div>      

。。。

使用CSS flex可以轻松实现。 
<div class="fixed-bottom">...</div>
具有如下HTML标记：

<div class="fixed-bottom">...</div>      

<html>
    <body>
        <div class="container"></div>
        <div class="footer"></div>
    </body>
</html>
这里有一个代码笔可以使用：

您的页脚的绝对位置完全取决于容器div的大小。因此，如果容器中没有任何内容，它可能会在页面中间的某个位置结束，并且您的页脚位置低于该位置50px。谢谢您的回答，解决这个问题的方法是什么？要么将您的页脚放在容器div之外，要么强制容器具有全高这可能就是您要找的@MyHeadharts，我正在使用的是您的解决方案，我想我现在可能有问题，因为我已经将页脚放在容器中，行和span 12Thank，@renderbody（）在做什么，我以前尝试过这个解决方案，但实际上，@renderbody（）输出为html？忽略这一部分-它只是一个从其他控件调用主体内容的函数。非常感谢，我认为html、主体高度已经设置好了，似乎没有，底部也改变了，瞧。再次感谢道歉者再次提问，但我现在注意到，当视口缩小到iphone大小时，页脚文本与内容重叠？有什么想法吗？没问题。您是否将
页边距底部：50px
应用于页脚前的最后一段内容？如果你是，但它不起作用，那么你可能必须为iPhone增加这个值（不知道为什么，但可能是这样）。你可以使用我看到我的错误，我没有像你说的那样，在页脚之前的内容上应用边距底部：50px，将底部设置为0，现在可以了，不需要媒体查询…呸！！！这是一个可怕的修复；这创建了一个冻结的页脚，其下的内容向上滚动。我错过什么了吗？Thx。如果这就是你所说的冻结，它会使页脚粘在屏幕底部。在小屏幕上，即使有重叠的内容，也会显示页脚。取决于您是否希望始终显示页脚还需要注意的是，如果您有JS生成的dom
ng repeat
在angular中。。。对于生成的元素，您需要将
边距底部
放在包装器上，其高度等于粘性页脚的高度。。。bootstrap将边距顶部放在页脚上，但边距顶部不会应用于生成的dom，您最终将生成的dom的底部放在页脚下。谢谢！为我工作！从Bootstrap 4开始，它不是
navbar fixed bottom
，而是
fixed bottom
对calc的出色使用。遗憾的是，在2017年，自定义网站使用了一些Bootstrap功能，但覆盖了内容，这对我来说还不错 
<div class="fixed-bottom">...</div>