刷新页脚到页面底部，推特引导

我通常熟悉使用css刷新页脚的技术。

但是我在将这种方法用于Twitter引导时遇到了一些麻烦，很可能是因为Twitter引导本质上是响应式的。使用Twitter引导，我不能得到页脚冲洗到页面底部使用上述博客文章中描述的方法。

当前回答

这是用Twitter Bootstrap和新的navbar-fixed-bottom类的正确方法:(你不知道我花了多长时间寻找这个)

CSS:

html {
  position: relative;
  min-height: 100%;
}
#content {
  padding-bottom: 50px;
}
#footer .navbar{
  position: absolute;
}

HTML:

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

2013-02-06 18:09:18

其他回答

这个是最好的!

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}

2019-10-15 05:33:36

这是用Twitter Bootstrap和新的navbar-fixed-bottom类的正确方法:(你不知道我花了多长时间寻找这个)

CSS:

html {
  position: relative;
  min-height: 100%;
}
#content {
  padding-bottom: 50px;
}
#footer .navbar{
  position: absolute;
}

HTML:

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

2013-02-06 18:09:18

为了让你的粘性页脚工作，你需要包装你的.container-fluid div，你还缺少了.wrapper类的一些属性。试试这个:

从body标签中删除padding-top:70px，并将其包含在.container-fluid中，如下所示:

.wrapper > .container-fluid {
    padding-top: 70px;
}

我们必须这样做，因为向下推主体以适应导航条，最终会将页脚推得更远一点(更远70px)，超过视口，所以我们得到了一个滚动条。相反，使用.container-fluid div会得到更好的结果。

接下来，我们必须将.wrapper类从.container-fluid div外面移除，然后用它来包装#main div，如下所示:

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>

你的页脚当然必须在。wrapper div之外，所以从'。包装div并把它放在外面，像这样:

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

在这一切完成后，通过使用负边距正确地将你的页脚推向你的.wrapper类，如下所示:

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

这应该可以工作，尽管你可能需要修改一些其他的东西来让它在屏幕调整大小时工作，比如在.wrapper类上重置高度，如下所示:

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}

2012-04-11 14:17:21

#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

页脚高度匹配wrap元素的底部缩进的大小。

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}

2013-07-20 11:49:47

在这里，你会发现HAML (http://haml.info)的方法，导航栏在顶部，页脚在页面底部:

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER

2012-12-02 22:59:52

刷新页脚到页面底部，推特引导

推荐文章

最新文章

标签