刷新页脚到页面底部,twitter bootstrap

问题描述 投票:273回答:29

我通常熟悉使用CSS刷新页脚的技巧。

但是我在使用这种方法为Twitter引导工作时遇到了一些麻烦,很可能是因为Twitter引导本质上是响应式的。使用Twitter bootstrap我无法使用上面博客文章中描述的方法让页脚刷新到页面底部。

css twitter-bootstrap footer
29个回答
309
投票

发现片段here非常适合bootstrap

HTML:

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
} 

来源:DemoTutorial(不再提供; RIP


10
投票

你需要包装你的.container-fluid div以使你的粘性页脚工作,你也缺少.wrapper类的一些属性。试试这个:

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

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

我们必须这样做,因为向下推动body以容纳导航栏最终将页脚推进到视口之后(70px更远),因此我们得到一个滚动条。我们得到更好的结果推动.container-fluid div。

接下来我们必须删除你的.wrapper div之外的.container-fluid类并用它包装你的#main div,如下所示:

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

你的页脚当然必须在.wrapper div之外,所以将它从`.wrapper 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;
   }
}

10
投票

在bootstrap 4.3的latest version中,这可以使用.fixed-bottom类来完成。

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

这是我如何使用它与页脚:

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

您可以在职位文档here中找到更多信息。


9
投票

这是使用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>

4
投票

使用navbar组件并添加.navbar-fixed-bottom类:

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

添加身体

  { padding-bottom: 70px; }

3
投票

处理宽度约束布局使用以下内容,以便您不会得到圆角,以便您的导航栏将与应用程序的两侧齐平

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="width-constraint clearfix">
            <p class="pull-left muted credit">YourApp v1.0.0</p>

            <p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
        </div>
    </div>
</div>

然后你可以使用css覆盖引导类来调整高度,字体和颜色

    .navbar-fixed-bottom {
      font-size: 12px;
      line-height: 18px;
    }
    .navbar-fixed-bottom .navbar-inner {
        min-height: 22px;
    }
    .navbar-fixed-bottom .p {
        margin: 2px 0 2px;
    }

3
投票

你可以使用jQuery来处理这个:

$(function() {
    /**
     * Read the size of the window and reposition the footer at the bottom.
     */
    var stickyFooter = function(){
        var pageHeight = $('html').height();
        var windowHeight = $(window).height();
        var footerHeight = $('footer').outerHeight();

        // A footer with 'fixed-bottom' has the CSS attribute "position: absolute",
        // and thus is outside of its container and counted in $('html').height().
        var totalHeight = $('footer').hasClass('fixed-bottom') ?
            pageHeight + footerHeight : pageHeight;

        // If the window is larger than the content, fix the footer at the bottom.
        if (windowHeight >= totalHeight) {
            return $('footer').addClass('fixed-bottom');
        } else {
            // If the page content is larger than the window, the footer must move.
            return $('footer').removeClass('fixed-bottom');
        }
    };

    // Call when this script is first loaded.
    window.onload = stickyFooter;

    // Call again when the window is resized.
    $(window).resize(function() {
        stickyFooter();
    });
});

2
投票

最简单的技术可能是使用Bootstrap navbar-static-bottom与使用height: 100vh(新的CSS3 view port percentage)设置主容器div。这会将页脚冲到底部。

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>

2
投票

Bootstrap 3.6.6测试。

HTML

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

CSS

.footer {
  bottom: 0;
  position: absolute;
}

1
投票
#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;
}

页脚高度与包装元素的底部缩进的大小相匹配。

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

1
投票

唯一一个适合我的人!:

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

438
投票

这现在包含在Bootstrap 2.2.1中。

Bootstrap 3.x

使用navbar组件并添加.navbar-fixed-bottom类:

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

Bootstrap 4.x

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

不要忘记添加body { padding-bottom: 70px; }或以其他方式覆盖页面内容。

文件:http://getbootstrap.com/components/#navbar-fixed-bottom


1
投票

使用Bootstrap 4中内置的flex实用程序!以下是我主要使用的Bootstrap 4实用程序。

<div class="d-flex flex-column" style="min-height: 100vh">
  <header></header>
  <div class="container flex-grow-1">
    <div>Some Content</div>
  </div>
  <footer></footer>
</div>
  • .d-flex使主要div成为一个flex容器
  • 主要div上的.flex-column将您的弹性项目排列在一列中
  • min-height: 100vh到主div,可以使用样式属性,也可以在css中垂直填充视口
  • 容器元素上的.flex-grow-1使主内容容器占用视口高度中剩余的所有空间。

0
投票

看起来height:100%'链'在div#main被打破了。尝试添加height:100%,这可能会让你更接近你的目标。


0
投票

在这里你可以找到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

0
投票

把事情简单化。

footer {
  bottom: 0;
  position: absolute;
}

您可能还需要通过向margin-bottom添加相当于页脚高度的body来偏移页脚的高度。


0
投票

以下是使用css3的示例:

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

HTML:

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

fiddle


0
投票

这是bootstrap的工作方式:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

只需使用页面源,您应该能够看到。不要忘记顶部的qazxsw poi。


0
投票

另一种可能的解决方案,仅使用媒体查询

<div id="wrap">

0
投票

使用以下类将其推送到页面的最后一行,并使其居中。如果您在rails HAML页面上使用ruby,则可以使用以下代码。 @media screen and (min-width:1px) and (max-width:767px) { .footer { } } /* no style for smaller or else it goes weird.*/ @media screen and (min-width:768px) and (max-width:991px) { .footer{ bottom: 0; width: 100%; position: absolute; } } @media screen and (min-width:992px) and (max-width:1199px) { .footer{ bottom: 0; width: 100%; position: absolute; } } @media screen and (min-width:1120px){ .footer{ bottom: 0; width: 100%; position: absolute; } }

请不要忘记使用twitter bootstrap


0
投票

这是使用Flexbox的最新版Bootstrap(撰写本文时为4.3)的解决方案。

HTML:

%footer.card.text-center

CSS:

<div class="wrapper">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
<footer class="footer"></footer>

还有一个codepen例子:html, body { height: 100%; } body { display: flex; flex-direction: column; } .wrapper { flex-grow: 1; }


-3
投票

这种方式最适合我

https://codepen.io/tillytoby/pen/QPdomR

73
投票

Twitter bootstrap的一个工作示例NOT STICKY FOOTER

<script>
$(document).ready(function() {

    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;

    if (footerTop < docHeight)
        $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>

在用户打开devtools或调整窗口大小的情况下始终更新的版本。

<script>
    $(document).ready(function() {
        setInterval(function() {
            var docHeight = $(window).height();
            var footerHeight = $('#footer').height();
            var footerTop = $('#footer').position().top + footerHeight;
            var marginTop = (docHeight - footerTop + 10);

            if (footerTop < docHeight)
                $('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer
            else
                $('#footer').css('margin-top', '0px');
            // console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
        }, 250);
    });
</script>

你需要至少一个带有#footer的元素

如果内容适合屏幕不想要滚动条,只需将10的值更改为0即可 如果内容不适合屏幕,则会显示滚动条。


33
投票

以下是从官方页面实现此操作的方法:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

我刚刚测试了它,它工作得很棒! :)

HTML

<body>

    <!-- Part 1: Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Sticky footer</h1>
        </div>
        <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
      </div>

      <div id="push"></div>
    </div>

    <div id="footer">
      <div class="container">
        <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>
</body>

相关的CSS代码是这样的:

/* Sticky footer styles
-------------------------------------------------- */
html,
body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -30px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
    height: 30px;
}

#footer {
    background-color: #f5f5f5;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
    #footer {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

33
投票

对于Sticky Footer,我们在HTML中使用两个DIV's来获得基本的粘性页脚效果。像这样写:

HTML

<div class="container"></div>

<div class="footer"></div>

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}

28
投票

更简单的官方例子:http://getbootstrap.com/examples/sticky-footer-navbar/

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

18
投票

好吧,我找到了navbar-innernavbar-fixed-bottom的混合物

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

它似乎很好,适合我

请参阅Fiddle中的示例


11
投票

HenryW's answer很好,虽然我需要一些调整来让它按照我想要的方式工作。特别是以下处理:

  • 通过首先在javascript中标记不可见和设置可见来避免页面加载上的“跳跃”
  • 处理浏览器优雅地调整大小
  • 此外,如果浏览器变小并且页脚变得比页面大,则将页脚设置回页面
  • 高度函数调整

这些调整对我有用:

HTML:

<div id="footer" class="invisible">My sweet footer</div>

CSS:

#footer {
    padding-bottom: 30px;
}

JavaScript的:

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
    } else {
        $('#footer').css('margin-top', '');
    }
    $('#footer').removeClass('invisible');
}
$(document).ready(function() {
    setFooterStyle();
    window.onresize = setFooterStyle;
});

11
投票

这对我很有用。

将此类navbar-fixed-bottom添加到页脚。

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

我用它是这样的:

<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>

并且它在整个宽度上设置为底部。

编辑:这将设置页脚始终可见,这是您需要考虑的事项。

© www.soinside.com 2019 - 2024. All rights reserved.