喂那个页脚——不是游戏（还没有！）
页脚永远不会覆盖正文内容，因为它不是固定的。当页面应该更短时，它只是放在底部，在容器上使用 `min-height:100vh` 并使用 flexbox 将其向下推。
注意： 本示例使用当前最新版本的 jQuery (3.4.1.slim) 和 Bootstrap (4.4.1)（与上面的不同）。
Bootstrap 3 将页脚平齐到底部。不固定
我正在为我正在设计的网站使用 Bootstrap 3。
我想要一个像这个样本一样的页脚。 Sample
请注意，我不希望它 FIXED 所以 bootstrap 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;
}
您是否有您一直在处理的示例代码给您带来了问题？
它看起来像普通的页脚，如果你不想要固定，你可以更新样式。你遇到了什么问题？
当它是 HTML 中的最后一件事时，它将始终位于底部。需要一个代码示例来理解问题所在的令人困惑的问题。
@davidpauljunior：那些是粘性页脚，这不是我想要的
J
Jboy Flaga
这里有一个来自引导程序的简化解决方案（您不需要创建新类）：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>
这（来自 Bootstrap 文档/示例）应该是公认的答案。
对我来说，这不起作用，因为我的页脚相当高。如果你只想要一个段落，但我的有几列，那就太好了 - 使用这种方法，当我缩小到较小的尺寸时，我最终会在页脚下留出一个边距
这不是 Bootstraps 粘性页脚解决方案吗？我不认为OP是这个意思。对我来说，页脚很长，但页脚出现在屏幕底部，但没有出现在内容的底部（即内容上方）。我不得不改变 Position: absolute;到相对（在 .footer 类中）以使其正常工作。
如果该主题的标题中没有“未修复”，这将是正确答案...
这仅适用于固定大小的页脚，我更喜欢@ChristopherTan 提出的 Philip Walton 的解决方案，它超级纤薄且与页脚的高度无关
S
Surjith S M
请参见下面的示例。如果页面内容较少，这会将您的页脚固定在底部，如果页面内容较多，则其行为类似于普通页脚。
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 的回答。
您的链接已损坏
为什么包装器中有两个高度属性定义？
@HardlyNoticeable 一个是 min-width 以强制包装器，即使内容较少。
仍然想知道为什么有两个高度属性定义。你没有回答@SurjithSM
@Erowlin这是一个错误。你不需要两个高度属性。只有 min-height 就足够了，编辑了答案。
C
Christopher Tan
使用 flexbox，因为您可以随意使用它。 bootstrap 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 提供的东西太多了，我们甚至不知道如何充分利用它。
我喜欢这个解决方案。惊人。
R
Rex Charles
更新：这并不能直接完整地回答问题，但其他人可能会觉得这很有用。
这是您的响应式页脚的 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 设置为等于页脚的高度。您需要在页面 load 和 resize 事件以及页脚 DOMSubtreeModified 上动态执行此操作。
e
eGlu
对于仍在苦苦挣扎且已回答的解决方案无法按您希望的那样工作的人们，这是我找到的最简单的解决方案。
包装您的主要内容并为其分配最小视图高度。将 60 调整为您的风格所需的任何值。
<div id="content" style="min-height:60vh"></div>
<div id="footer"></div>
就是这样，它工作得很好。
我遇到了与所讨论的问题相同的问题。在这里尝试了几乎所有排名靠前的答案之后，这是唯一对我有用的答案。它适用于各种尺寸。我所做的唯一改变是“最小高度：70vh”。这将取决于您网站的页眉和页脚大小。
这应该更高，完全按照要求工作。
这满足了我的需求。只需调整最小高度值，直到获得所需的结果。
太棒了，这是解决页脚放置问题的最简单有效的解决方案！
w
weiy
Galen Gidman 发布了一个非常好的解决方案来解决没有固定高度的响应式粘性页脚问题。您可以在他的博客上找到他的完整解决方案：http://galengidman.com/2014/03/25/responsive-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：我没有水平滚动条。
t
tao
')); } });身体{最小高度：100vh；位置：相对； } 页脚 { 背景颜色：rgba(0, 0, 0, .65);白颜色;位置：绝对；底部：0；宽度：100%；填充：1.5rem；显示：块； } 页脚 hr { 边框顶部：1px 实心 rgba(0, 0, 0, .42);边框底部：1px 实心 rgba(255, 255, 255, .21); } < div class="container">
' )); } .wrapper { 最小高度：100vh；填充顶部：54px；显示：弯曲；弹性方向：列； } .wrapper>* { flex-grow: 0; } .wrapper>main { flex-grow: 1; } 页脚 { 背景颜色：rgba(0, 0, 0, .65);白颜色;宽度：100%；填充：1.5rem； } 页脚 hr { 边框顶部：1px 实心 rgba(0, 0, 0, .42);边框底部：1px 实心 rgba(255, 255, 255, .21); }
对于纯 CSS 解决方案，请在第二个 <hr> 之后滚动。第一个是最初的答案（在 2016 年给出）
上述解决方案的主要缺陷是它们具有固定的页脚高度。这在现实世界中并不适用，在现实世界中，人们使用数以万计的设备，并养成在您最不期望时旋转它们的坏习惯，并且**噗！**您的页面内容位于页脚后面！
在现实世界中，您需要一个函数来计算页脚高度并动态调整页面内容的 padding-bottom 以适应该高度。您需要在页面 load 和 resize 事件以及页脚的 DOMSubtreeModified 上运行这个小函数（以防您的页脚异步动态更新，或者它包含在交互时会改变大小的动画元素）。
这是一个概念证明，使用 jQuery v3.0.0 和 Bootstrap v4-alpha，但没有理由不应该在每个较低版本上工作。
jQuery(document).ready(function($) { $.fn.accomodateFooter = function() { var footerHeight = $('footer').outerHeight(); $(this).css({ 'padding-bottom': footerHeight + 'px' }); } $('footer').on('DOMSubtreeModified', function() { $('body').accomodateFooter(); }) $(window).on('resize', function() { $('body').accomodateFooter(); }) $('body').accomodateFooter(); window.addMoreContentToFooter = function() { var f = $('footer'); f.append( $('
', { text: "人类给我注意，喵喵叫着晒太阳，舔你的脸，醒来在房子里转悠，在你人类的床上跳来跳去，然后又睡着了。呕吐你的枕头晒太阳。狗闻起来很臭，在沙发上跳来跳去，不停地喵喵叫直到得到食物，所以整天打盹，但对着吸尘器发出嘶嘶声。" })) .append($('')); } });身体{最小高度：100vh；位置：相对； } 页脚 { 背景颜色：rgba(0, 0, 0, .65);白颜色;位置：绝对；底部：0；宽度：100%；填充：1.5rem；显示：块； } 页脚 hr { 边框顶部：1px 实心 rgba(0, 0, 0, .42);边框底部：1px 实心 rgba(255, 255, 255, .21); } < div class="container">
喂那个页脚 - 不是游戏（还没有！）
你会注意到身体底部填充正在增长以适应页脚的高度（因此页面内容不会被它覆盖）。
注意：我使用了 jQueryv3.0.0和 Bootstrapv4-alpha但没有理由不使用每个版本的较低版本。
最初，我已发布此解决方案 here，但我意识到如果在此问题下发布它可能会帮助更多人。
注意：我特意将 $([selector]).accomodateFooter() 包装为一个 jQuery 插件，因此它可以在任何 DOM 元素上运行，因为在大多数布局中它不需要 $('body') 的 bottom-padding正在调整，但某些带有 position:relative 的页面包装元素（通常是 footer 的直接父级）。
后期编辑（最初回答后 3 年以上）：
在这一点上，我不再认为使用 JavaScript 在页面底部定位动态内容页脚是可以接受的。它可以单独使用 CSS 来实现，使用 flexbox，闪电般快速，跨浏览器。
这里是：
// 将其保留，以便您可以将内容注入页脚并对其进行测试： // （但它不再调整页脚的大小） function addMoreContentToFooter() { var f = $('footer'); f.append($('
', { text: "人类给我注意 喵喵叫着晒太阳 舔你的脸再次。呕吐在你的枕头上晒太阳。狗闻起来很臭，在沙发上跳来跳去，不停地喵喵叫直到得到食物，所以整天打盹，但对着吸尘器发出嘶嘶声。" })) .append($('' )); } .wrapper { 最小高度：100vh；填充顶部：54px；显示：弯曲；弹性方向：列； } .wrapper>* { flex-grow: 0; } .wrapper>main { flex-grow: 1; } 页脚 { 背景颜色：rgba(0, 0, 0, .65);白颜色;宽度：100%；填充：1.5rem； } 页脚 hr { 边框顶部：1px 实心 rgba(0, 0, 0, .42);边框底部：1px 实心 rgba(255, 255, 255, .21); }
V
Vin
此方法使用最少的标记。只需将所有内容放在一个 .wrapper 中，它的 padding-bottom 和负 margin-bottom 等于页脚高度（在我的示例中为 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>
A
AnBisw
或这个
<footer class="navbar navbar-default navbar-fixed-bottom">
<p class="text-muted" align="center">This is a footer</p>
</footer>
s
shilovk
对于引导程序：
<div class="navbar-fixed-bottom row-fluid">
<div class="navbar-inner">
<div class="container">
Text
</div>
</div>
</div>
该问题明确指出
navbar-fixed-bottom 不是解决问题的方法。
B
Brian Edwards
这些解决方案中没有一个完全适合我，因为我在页脚中使用了 navbar-inverse 类。但我确实得到了一个有效且无 Javascript 的解决方案。使用 Chrome 来帮助形成媒体查询。页脚的高度会随着屏幕调整大小而变化，因此您必须注意这一点并进行相应调整。您的页脚内容（我设置 id="footer" 来定义我的内容）应该使用 postion=absolute 和 bottom=0 将其保持在底部。宽度：100%。这是我的带有媒体查询的 CSS。您必须调整 min-width 和 max-width 并添加或删除一些元素：
#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;
}
}
L
Leniel Maccaferri
这就是使用 Flexbox 对我有用的方法：
.body-class {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.body-content {
flex: 1 0 auto;
width: 100%;
}
.footer {
width: 100%;
height: 60px;
background-color: #f5f5f5;
flex: none;
}
来源：https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
S
Sagor Chowdhuri
使用任何类并使其高度固定。它解决了我的问题。
<div class="container"></div>
<footer></footer>
CSS：
.container{
min-height: 60vh;
}
