Bootstrap 3将页脚冲洗到底部。不固定


176

我正在为正在设计的网站使用Bootstrap 3。

我想要一个像这样的样本页脚。 样品

请注意,我不希望它已修复,因此引导程序navbar-fixed-bottom无法解决我的问题。我只希望它始终位于内容的底部并且也要有所响应。

任何指南将不胜感激。


编辑:

对不起,如果我不清楚。现在发生的是,当内容主体没有足够的内容时。我的页脚向上移动,然后在底部留下一个空白区域。

这就是我现在所拥有的导航栏

<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <h5 id='footer-header'> SITEMAP </h3>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>News</p>
                        <p>contact</p>
                    </div>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>FAQ</p>
                        <p>Privacy Policy</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxx </h3>
                    <p>yyyyyyyyyyyyy</p>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxxx </h3>
                    <p>uuuuuuuuuuuuuuu</p>
                </div>
            </div>
        </div>
    </nav>

的CSS

.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}

您是否有一直在处理的示例代码给您带来了问题?
badAdviceGuy 2014年

看起来像常规页脚,如果您不希望使用固定样式,则可以更新样式。您遇到什么问题?
Mutant

当它是HTML中的最后一件事时,它将始终位于底部。令人困惑的问题,需要一个代码示例来了解问题所在。
乔·康林


@davidpauljunior:那些脚注是粘性的,这不是我想要的
user3169403 2014年

Answers:


123

请参见下面的示例。如果页面内容较少,这将使页脚定位在底部,如果页面内容较多,则页脚将像普通页脚一样。

的CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

的HTML

<div class="wrapper">
  <p>Your website content here.</p>
  <div class="push"></div>
</div>
<div class="footer">
  <p>Copyright (c) 2008</p>
</div>

更新:新版本的Bootstrap演示了如何在不添加包装的情况下添加粘性页脚。有关更多详细信息,请参见Jboy Flaga的答案。


您的链接已损坏
露背装

2
为什么在包装器中有两个height属性定义?
几乎没有注意到'17

@HardlyNoticeable是最小宽度,即使内容较少也要强制包装。
Surjith SM

仍然想知道为什么有两个高度属性定义。您没有回答@SurjithSM
Erowlin '17

@Erowlin这是一个错误。您不需要两个高度属性。编辑答案时,只有最低高度就足够了。
Surjith SM

315

这里有一个来自bootstrap的简化解决方案(您无需创建新类): http //getbootstrap.com/examples/sticky-footer-navbar/

打开该页面时,右键单击浏览器并单击“查看源代码”,然后打开sticky-footer-navbar.css文件(http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar。的CSS

您会看到您只需要此CSS

/* Sticky footer styles
-------------------------------------------------- */
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;
}

为此HTML

<html>
    ...
    <body>
        <!-- Begin page content -->
        <div class="container">
        </div>
        ...

        <footer class="footer">
        </footer>
    </body>
</html>

19
这(来自Bootstrap文档/示例)应该是公认的答案。
richardm

5
对我来说这不起作用,因为我的页脚很高。如果您只想要一个段落但我的却有几列,那就太好了-使用这种方法,当我缩小到较小的尺寸时,我在页脚下有一个空白
脚下

9
这是Bootstraps粘性页脚解决方案吗?我不认为OP就是这个意思。对我来说,页面较长时,页脚出现在屏幕底部,而不是内容的底部(即,内容上方)。我不得不改变立场:绝对的。相对(.footer类)中的这个工作。
蒂诺·麦克拉伦

24
如果此主题的标题中没有“ not fixed”,这将是正确的答案...
ruudy

1
这仅适用于固定大小的页脚,我更喜欢@ChristopherTan提出的Philip Walton的解决方案,该解决方案超薄且
不受

15

请使用flexbox,因为您可以随时使用它。引导程序4提供的解决方案仍在响应式布局中搜索重叠内容,例如:它将在移动视图中中断,我遇到的最巧妙的技巧是使用此处显示的flexbox解决方案演示:( https://philipwalton.github.io / solved-by-flexbox / demos / sticky-footer /),这样我们就不必处​​理固定高度问题了,这是一个过时的解决方案...无论您使用哪种引导程序,此解决方案都适用于引导程序3和4。

<body class="Site">
  <header></header>
  <main class="Site-content"></main>
  <footer></footer>
</body>

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

这是一个非常聪明的解决方案。我认为CSS太多了,我们甚至都不知道如何充分利用它。
吉尔伯特

1
我喜欢这个解决方案。惊人。
Bagus Aji Santoso

14

更新:这不能直接完整地回答问题,但是其他人可能会发现这很有用。

这是您的响应页脚的HTML

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

对于CSS

footer{
    width:100%;
    min-height:100px;    
    background-color: #222; /* This color gets inverted color or you can add navbar inverse class in html */
}

注意:在发布此问题时,以上代码行并未将页脚推到页面内容下方;但当页面上的内容很少时,它将使您的页脚不会爬到页面的中间。对于确实将页脚推到页面内容下方的示例,请在此处查看http://getbootstrap.com/examples/sticky-footer/


这实际上是一个不好的解决方案,因为页脚在见面时掩盖了主要内容。您需要padding-bottom将主要内容容器的设置为等于页脚的高度。而且,您需要在页面loadresize事件以及页脚上动态地执行此操作DOMSubtreeModified

9

对于仍在挣扎中并且解决方案无法按您希望的那样工作的人们,这是我找到的最简单的解决方案。

包装您的主要内容并为其分配最小查看高度。将60调整为您的样式所需的任何值。

<div id="content" style="min-height:60vh"></div>
<div id="footer"></div>

就是这样,并且效果很好。


我遇到的问题与上述问题相同。在这里尝试了几乎所有排名靠前的答案之后,这是唯一为我工作的答案。它适用于所有尺寸。我所做的唯一更改是“最低高度:70vh”。这将取决于您网站的页眉和页脚大小。
Arfath '17

这应该更高,完全按照要求工作。
山药

这符合我的需求。只需调整最小高度值,直到获得所需的结果。
sawyerrken

太好了,这是解决页脚放置问题的最简单,最有效的解决方案!
Prahlad Yeri

5

盖伦·吉德曼(Galen Gidman)发布了一个非常好的解决方案,以解决没有固定高度的响应式粘性页脚的问题。您可以在他的博客上找到他的完整解决方案:http : //galengidman.com/2014/03/25/sensitive-flexible-height-sticky-footers-in-css/

的HTML

<header class="page-row">
  <h1>Site Title</h1>
</header>

<main class="page-row page-row-expanded">
  <p>Page content goes here.</p>
</main>

<footer class="page-row">
  <p>Copyright, blah blah blah.</p>
</footer>

的CSS

html,
body { height: 100%; }

body {
  display: table;
  width: 100%;
}

.page-row {
  display: table-row;
  height: 1px;
}

.page-row-expanded { height: 100%; }

这似乎与引导程序兼容,因此应该是公认的答案,恕我直言。这并不完美,因为似乎出现了水平滚动条。
Florian Mertens 2015年

弗洛里安(Florian):我没有水平滚动条。
几乎没有引起注意'17

4

对于纯CSS解决方案,请滚动到2nd之后<hr>。第一个是初始答案(早在2016年给出)


上述解决方案的主要缺陷是页脚的高度固定
但这在现实世界中并没有减少它,因为人们使用无数的设备,并且有这种坏习惯,当您最不希望它和** of时,会旋转它们**页脚后面有您的页面内容!

在现实世界中,您需要一个函数来计算页脚的高度并动态调整页面内容padding-bottom以适应该高度。并且您需要在页面loadresize事件以及页脚上运行此小函数DOMSubtreeModified(以防页脚被异步动态更新或包含与之交互时会改变大小的动画元素)。

这是使用jQuery v3.0.0和Bootstrap 的概念证明v4-alpha,但是没有理由不应该在每个版本的较低版本上使用它。

最初,我在这里发布了此解决方案但我意识到如果在此问题下发布,它可能会帮助更多的人。

注:我有意地包裹$([selector]).accomodateFooter()的jQuery插件,所以它可以在任何DOM元素上运行,因为在大多数布局它不是$('body')bottom-padding,需要调整,但一些网页包含的元素与position:relative(通常的直接父footer) 。


以后编辑(初始答案后3年以上):

在这一点上,我不再认为可以使用JavaScript在页面底部放置动态内容页脚。可以单独使用CSS,使用flexbox,快如闪电的跨浏览器来实现。

这里是:


3

此方法使用最少的标记。只需将所有内容放入.wrapper中即可,其底部和底部的空白距等于页脚高度(在我的示例中为100px)。

html, body {
    height: 100%;
}

/* give the wrapper a padding-bottom and negative margin-bottom equal to the footer height */

.wrapper {
    min-height: 100%;
    height: auto;
    margin: 0 auto -100px;
    padding-bottom: 100px;
}
.footer {
    height: 100px;
}

<body>

<div class="wrapper">
  <p>Your website content here.</p>
</div>
<div class="footer">
   <p>Copyright (c) 2014</p>
</div>

</body>

2

或这个

<footer class="navbar navbar-default navbar-fixed-bottom">
    <p class="text-muted" align="center">This is a footer</p>
</footer>

1

对于引导程序:

<div class="navbar-fixed-bottom row-fluid">
  <div class="navbar-inner">
    <div class="container">
      Text
    </div>
  </div>
</div>

2
该问题特别指出,navbar-fixed-bottom不是什么能解决问题。
p4sh4 '16

1

这些解决方案都不适合我,因为我在页脚中使用了navbar-inverse类。但是我确实得到了一个有效且无Javascript的解决方案。使用Chrome浏览器来帮助形成媒体查询。页脚的高度随着屏幕调整大小而变化,因此您必须注意该高度并相应地进行调整。您的页脚内容(我设置了id =“ footer”来定义我的内容)应使用postion = absolute和bottom = 0使其保持在底部。宽度:100%。这是我的带有媒体查询的CSS。您必须调整最小宽度和最大宽度,并添加或删除一些元素:

#footer {
  position: absolute;
  color:  #ffffff;
  width: 100%;
  bottom: 0; 
}
@media only screen and (min-width:1px) and (max-width: 407px)  {
    body {
        margin-bottom: 275px;
    }

    #footer {
        height: 270px; 
    }
}
@media only screen and (min-width:408px) and (max-width: 768px)  {
    body {
        margin-bottom: 245px;
    }

    #footer {
        height: 240px; 
    }
}
@media only screen and (min-width:769px)   {
    body {
        margin-bottom: 125px;
    }

    #footer {
        height: 120px; 
    }
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.