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

小开

对于粘性的页脚，我们在HTML中使用了两个DIV's来实现基本的粘性的页脚效果。这样写:

超文本标记语言

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


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

CSS

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

小开

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

小开

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

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

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

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

接下来，我们必须在你的.container-fluid div外面删除.wrapper类，并用它包装你的#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;
}
}

小开

最佳答案

发现片段在这里工作真的很好引导

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

小开

这现在包含在Bootstrap 2.2.1中。

引导3.倍

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

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

引导4.倍

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

不要忘记添加body { padding-bottom: 70px; }，否则页面内容可能被覆盖。

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

小开

在这里，你会发现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

小开

下面是如何从官方页面实现这个功能:

http://getbootstrap.com/2.3.2/examples/sticky-footer.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>

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

当不希望滚动条内容适合屏幕时，只需将10的值改为0
如果内容不适合屏幕，滚动条将显示出来

小开

保持简单。

footer {
bottom: 0;
position: absolute;
}

你可能还需要通过在body中添加一个等同于页脚高度的margin-bottom来抵消页脚的高度。

小开

你可以使用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();
});
});

小开

下面是一个使用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>

提琴

小开

bootstrap是这样做的:

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

只需使用页面源代码，您就应该能够看到。不要忘记顶部的<div id="wrap">。

小开

更简单的官方示例: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;
}

小开

唯一一个对我有用的!：

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

小开

最简单的方法可能是使用Bootstrap navbar-static-bottom，同时使用height: 100vh设置主容器div(新CSS3 查看端口百分比)。这将把页脚冲洗到底部。

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

小开

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

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

增加身体

  { padding-bottom: 70px; }

小开

HenryW的回答是很好的，虽然我需要一些调整，以使它按我想要的方式工作。特别地，下面也处理:

避免“跳跃性”页面加载首先标记不可见和设置在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;
});

小开

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

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

小开

这对我来说非常有效。

将这个类navbar-fixed-bottom添加到你的页脚。

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

我是这样用的:

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

它在整个宽度的底部。

编辑:这将设置页脚始终可见，这是你需要考虑的事情。

小开

用Bootstrap 3.6.6测试。

超文本标记语言

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

CSS

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

小开

在bootstrap 4.3的最新版本中，可以使用.fixed-bottom类来完成。

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

下面是我如何在页脚中使用它:

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

你可以在位置文档在这里中找到更多信息。

小开

使用下面的类将它推到页面的最后一行，也使它到页面的中心。如果你正在使用ruby on rails HAML页面，你可以使用下面的代码。 %footer.card.text-center < / p >

请不要忘记使用twitter bootstrapp

小开

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

HTML:

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

CSS:

html, body {
height: 100%;
}


body {
display: flex;
flex-direction: column;
}


.wrapper {
flex-grow: 1;
}

和一个代码依赖的例子:https://codepen.io/tillytoby/pen/QPdomR

小开

使用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成为一个伸缩容器
在主div上.flex-column来安排你的伸缩项目在一个列中
min-height: 100vh到主div中，可以使用样式属性，也可以在CSS中，以垂直填充视口
元素上的.flex-grow-1来让主内容容器占用视口高度中剩余的所有空间。

小开

根据Bootstrap 4.3示例，以防你像我一样失去理智，这是它实际的工作方式:

页脚div的所有父类都需要有height: 100% (h-100类)
页脚的直接父类需要有display: flex (d-flex类)
页脚需要有margin-top: auto (mt-auto类)

问题在于，在现代前端框架中，我们经常对这些元素进行额外的包装。

例如，在我的案例中，使用Angular，我用一个独立的应用根组件、应用主组件和页脚组件组成了视图——所有这些组件都将它们的自定义元素添加到DOM中。

因此，为了使它工作，我必须向这些包装器元素添加类:一个额外的h-100，将d-flex向下移动一级，并将mt-auto从页脚向上移动一级(因此实际上它不再在页脚类上，而是在我的<app-footer>自定义元素上)。

小开

超文本标记语言

<div id="wrapper">


<div id="content">
<!-- navbar and containers here -->
</div>


<div id="footer">
<!-- your footer here -->
</div>


</div>

CSS

html, body {
height: 100%;
}


#wrapper {
min-height: 100%;
position: relative;
}


#content {
padding-bottom: 100px; /* Height of the footer element */
}


#footer {
width: 100%;
height: 100px; /* Adjust to the footer needs */
position: absolute;
bottom: 0;
left: 0;
}

小开

这个是最好的!

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

小开

这很有效

超文本标记语言

<footer></footer>

css

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

小开

使用这段代码在引导它的工作

<div class="navbar fixed-bottom">
<div class="container">
<p class="muted credit">Footer <a href="http://google.com">Link</a> and <a
href="http://google.com/">link</a>.</p>
</div>
</div>

小开

Bootstrap v4+溶液

这里有一个解决方案，不需要重新考虑HTML结构或任何涉及填充的额外CSS技巧:

<html style="height:100%;">
...
<body class="d-flex flex-column h-100">
...
<main class="flex-grow-1">...</main>
<footer>...</footer>
</body>
...
</html>

请注意，此解决方案允许页脚具有灵活的高度，这在为多个屏幕尺寸设计页面时特别有用，在收缩时使用内容包装。

为什么会这样

style="height:100%;"使<html>标记占据文档的整个空间。
类d-flex将display:flex设置为我们的<body>标记。
类flex-column将flex-direction:column设置为我们的<body>标记。它的子节点(<header>， <main>， <footer>和任何其他直接子节点)现在垂直对齐。
类h-100将height:100%设置为我们的<body>标记，这意味着它将垂直覆盖整个屏幕。
类flex-grow-1将flex-grow:1设置为我们的<main>，有效地指示它填充任何剩余的垂直空间，从而达到我们之前在<body>标记上设置的100%垂直高度。

工作演示在这里:https://codepen.io/maxencemaire/pen/VwvyRQB

有关flexbox的更多信息，请参阅https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

小开

使用Bootstrap 5保持页脚在底部


<div class="min-vh-100 d-flex flex-column
justify-content-between">
     

<div> <!-- Wrapper (Without footer) -->
       

<header>
I am a header.
</header>
      

<article>
I am an article!
</article>
       

</div> <!-- End: Wrapper (Without footer) -->
     

     

<footer>
I am a footer.
</footer>
     

</div>

< a href = " https://codepen.io/rasaf-ibrahim/pen/gOmzPZe?editors=0110" rel="noreferrer">Live Demo in CodePen

请注意

确保你用以下引导类将所有内容包装在<div>或任何其他块级元素中:
确保你在<div>或任何其他块级元素中包装了除页脚元素以外的所有内容。
确保你使用<footer>或任何其他块级元素来包装页脚。

代码的解释

min-vh-100确保body元素至少延伸到屏幕的整个高度
flex-column在保留堆叠块元素方面保持正常文档流的行为(这假设主体的直接子元素确实都是块元素)。
justify-content-between将页脚推到屏幕底部。

看看如何用CSS - 链接做同样的事情(保持页脚在底部)

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

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

Bootstrap v4+溶液

为什么会这样

使用Bootstrap 5保持页脚在底部

请注意

代码的解释

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