如何让页脚停留在网页的底部？

我有一个简单的2列布局，并在我的标记中清除了右侧和左侧div。 我的问题是，我不能让页脚停留在所有浏览器页面的底部。 它的工作原理是如果内容推下页脚，但情况并非总是如此。

更新：

它在Firefox中无法正常工作。 当页面上没有足够的内容将页脚一直推到浏览器窗口的底部时，我会在页脚下方看到一段背景色。 不幸的是，这是页面的默认状态。

粘脚：

  1. 有一个<div>与class="wrapper"为您的内容。

  2. 在wrapper的结束</div> 之前放置<div class="push"></div> 。

  3. wrapper </div>结束后 ，放置<div class="footer"></div> 。 

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

使用CSS vh单位！

也许最明显和不胡贴的方式去粘脚注册将是使用新的CSS视口单位 。

以下面简单的标记为例： 

 <header>header goes here</header> <div class="content">This page has little content</div> <footer>This is my footer</footer>

如果页眉的高度是80px，页脚高度是40px，那么我们可以在内容div上使用单个规则制作粘性页脚： 

 .content { min-height: calc(100vh - 120px); /* 80px header + 40px footer = 120px */ }

这意味着：让内容div的高度至less为视口高度的100％减去页眉和页脚的组合高度。

而已。 

 * { margin:0; padding:0; } header { background: yellow; height: 80px; } .content { min-height: calc(100vh - 120px); /* 80px header + 40px footer = 120px */ background: pink; } footer { height: 40px; background: aqua; } 
 <header>header goes here</header> <div class="content">This page has little content</div> <footer>This is my footer</footer>

你可以使用position: absolute来将页脚放在页面底部，但是要确保你的2列有适当的margin-bottom这样它们才不会被页脚遮挡。 

 #footer { position: absolute; bottom: 0px; width: 100%; } #content, #sidebar { margin-bottom: 5em; }

具有display: flex粘性页脚display: flex

解决scheme灵感来自Philip Walton的粘性页脚 。

说明

此解决scheme仅适用于 ：

  • Chrome≥21.0
  • Firefox≥20.0
  • Internet Explorer≥10
  • Safari≥6.1

它基于flex显示 ，利用flex-grow属性，该属性允许元素在高度或宽度上 （当flow-direction分别设置为column或row ） 增长 ，以占用容器中的额外空间。

我们也要利用vh单元，其中1vh被定义为 ：

1/100的视口高度

因此， 100vh的高度是一个简洁的方式来告诉元素跨越整个视口的高度。

这是你如何构build你的网页： 

 ----------- body ----------- ---------------------------- ---------- footer ---------- ----------------------------

为了将页脚粘贴到页面的底部，您希望主体和页脚之间的空间增加，以便将页脚推到页面的底部。

所以我们的布局变成： 

 ----------- body ----------- ---------------------------- ---------- spacer ---------- <- This element must grow in height ---------------------------- ---------- footer ---------- ----------------------------

码

上述方法如下实施

HTML 

 <html> <body> <div class="content" /> <div class="spacer" /> <footer class="footer" /> </body> </html>

CSS 

 body { display: flex; flex-direction: column; min-height: 100vh; } .spacer { flex: 1; }

你可以看看JSFiddle 。

Safari的怪癖

请注意，Safari 的flex-shrink属性有一个有缺陷的实现 ，它允许项目缩小超过显示内容所需的最小高度。 要解决这个问题，你必须在上面的例子中明确地将flex-shrink属性设置为0到.content和footer ： 

 .content { flex-shrink: 0; } .footer { flex-shrink: 0; }

将#footer的CSS设置为： 

 position: absolute; bottom: 0;

然后，您需要在#sidebar和#content的底部添加padding或margin ，以匹配#footer的高度，或者当它们重叠时， #footer将覆盖它们。

另外，如果我没有记错，IE6 bottom: 0有一个问题bottom: 0 CSS。 你可能不得不使用IE6的JS解决scheme（如果你关心的是IE6）。

这是一个jQuery的解决scheme，就像一个魅力。 它检查窗口的高度是否大于身体的高度。 如果是，那就改变页脚的页边距来补偿。 在Firefox，Chrome，Safari和Opera上进行testing。 

 $( function () { var height_diff = $( window ).height() - $( 'body' ).height(); if ( height_diff > 0 ) { $( '#footer' ).css( 'margin-top', height_diff ); } });

如果您的页脚已经有一个边距（例如50像素），您将需要更改最后一部分： 

 css( 'margin-top', height_diff + 50 )

使用绝对定位和z-index在任何分辨率下使用以下步骤创build粘性页脚div：

  • 创build一个position: absolute; bottom: 0;的页脚div position: absolute; bottom: 0; position: absolute; bottom: 0; 和所需的高度
  • 设置页脚的填充以在内容底部和窗口底部之间添加空格
  • 创build一个容器div ，用position: relative; min-height: 100%;来包装主体内容position: relative; min-height: 100%; position: relative; min-height: 100%;
  • 将底部填充添加到等于页脚高度加上填充的主内容div
  • 如果页脚被剪切，请设置页脚的z-index大于容器div

这里是一个例子： 

  <!doctype html> <html> <head> <title>Sticky Footer</title> <meta charset="utf-8"> <style> .wrapper { position: relative; min-height: 100%; } .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; } .column { height: 2000px; padding-bottom: 300px; background-color: green; } /* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */ </style> </head> <body> <div class="wrapper"> <div class="column"> <span>hello</span> </div> <div class="footer"> <p>This is a test. This is only a test...</p> </div> </div> </body> </html>

尝试在内容和边栏上放置一个容器div（使用overflow：auto）。

如果这不起作用，你有没有正确显示页脚的截图或示例链接？

一种解决方法是设置箱子的最小高度。 不幸的是，它似乎没有得到IE （惊喜）的支持 。

我将添加到@Jimmy：您还需要声明绝对（或相对）定位到包含页脚的元素。 在你的情况下，它是身体的元素。

编辑：我用萤火虫在您的网页上testing它，它似乎工作得很好…

这些纯粹的CSS解决scheme都不能正常工作，dynamic调整内容大小（至less在Firefox和Safari上），例如，如果你在容器div上设置了一个背景，然后在div内resize（添加几行）桌子可以伸出风格区域的底部，也就是说，在黑色主题上可以有一半的桌子是白色的，半桌子是白色的，因为字体颜色和背景颜色都是白色的。 它基本上是不可修复的整合者页面。

嵌套div多列布局是一个丑陋的黑客和100％min-height身体/容器div粘页脚是一个丑陋的黑客。

唯一可以在所有浏览器上运行的无脚本解决scheme：使用ad（for header）/ tfoot（for footer）/ tbody（td for any列数）和100％高度的简单/更短的表。 但是，这已经意识到语义和search引擎优化的缺点（tfoot必须出现在tbody之前，ARIAangular色可能会帮助体面的search引擎）。

CSS： 

  #container{ width: 100%; height: 100vh; } #container.footer{ float:left; width:100%; height:20vh; margin-top:80vh; background-color:red; }

HTML： 

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

如果您正在寻找一个页面底部alignment的响应页脚，这应该可以做到这一点，而页脚底部始终保持视口高度的80％。

对于这个问题，我所看到的许多答案都很笨重，很难实现，效率低下，所以我想我会试试看，并拿出我自己的解决scheme，这只是一个小小的CSS和HTML 

 html, body { height: 100%; margin: 0; } .body { min-height: calc(100% - 2rem); width: 100%; background-color: grey; } .footer { height: 2rem; width: 100%; background-color: yellow; } 
 <body> <div class="body">test as body</div> <div class="footer">test as footer</div> </body>

这是一个浮动粘脚的技术上令人印象深刻的网站（无论你是否喜欢精确的美学）：

http://alltop.com/

（点击进入“科学”类别，查看IE中的浮动页脚）

你可以看看他们的CSS，看看你是否可以跟踪他们所有的技巧。 我发现我有我的最好的CSS运气，通过开始工作，并削减我不需要的部分。

小艺术家借用，伟大的艺术家偷。
– 乔布斯
（引用巴勃罗·毕加索）

多个人已经把这个简单的问题的答案放在这里，但我有一件事要补充，考虑到我是多么的沮丧，直到我弄清楚我做错了什么。

如上所述，最简单的方法就是这样。 

 html { position: relative; min-height: 100%; } body { background-color: transparent; position: static; height: 100%; margin-bottom: 30px; } .site-footer { position: absolute; height: 30px; bottom: 0px; left: 0px; right: 0px; }

然而，在post中没有提到的属性，可能是因为它通常是默认的，是body标签上的静态位置 。 相对位置不行！

我的wordpress主题已经覆盖了默认的主体显示，它让我困惑了很长时间。

jQuery CROSSBRAWSER CUSTOM PLUGIN – $ .footerBootom（）

或者像我一样使用jQuery，并将页脚高度设置为auto或修复…无论你喜欢什么，它都可以工作。 这个插件使用jQueryselect器，所以要使它工作，你将不得不包括jQuery库到您的文件。 无论如何…

这里是你如何运行插件。 导入jQuery，复制这个自定义jQuery插件的代码，并在导入jQuery！之后导入它。 这是非常简单和基本的，但重要的。

当你这样做时，你所要做的就是运行这个代码： 

 $.footerBootom({target:"footer"}); //as html5 tag <footer>. // You can change it to your prefered "div" with for example class "footer" // by setting target to {target:"div.footer"}

没有必要把它放在文档就绪事件中。 它会运行良好。 当页面加载和窗口resize时，它将重新计算页脚的位置。

这是你不需要了解的插件的代码。 只要知道如何执行它。 它为你做的工作。 但是，如果你想知道它是如何工作的，只需查看代码即可。 我离开那里，为你而战。 

 //import jQuery library before this script 
 //import jQuery library before this script //our custom jQuery Plugin (function($) { $.footerBootom = function(options) { //or use "$.fn.footerBootom" or "$.footerBootom" to call it globaly directly from $.footerBootom(); var defaults = { target: "footer", container: "html", innercontainer: "body", css: { footer: { position: "absolute", left: 0, bottom: 0, }, html: { position: "relative", minHeight: "100%" } } }; options = $.extend(defaults, options); //JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE $(options.target).css({ "position": options.css.footer.position, "left": options.css.footer.left, "bottom": options.css.footer.bottom, }); $(options.container).css({ "position": options.css.html.position, "min-height": options.css.html.minHeight, }); function logic() { var footerOuterHeight = $(options.target).outerHeight(); //get outer footer height $(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); //set padding equal to footer heigth on body element $(options.target).css('height', footerOuterHeight + "!important"); //set outerHeight of footer element to ... footer console.log("jQ custom plugin footerBottom runs"); // disply text in console so ou can check that it works in your browser. Delete it if you like. }; //DEFINE WHEN TO RUN FUNCTION $(window).on('load resize', function() { //run on page loaded and on window resized logic(); }); // RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE // return this.each(function() { // this.checked = true; // }); // return this; }; })(jQuery); //end of plugin // USE EXAMPLE $.footerBootom(); //run our plugin with all default settings for HTML5 
 /* Set your footer CSS to what ever you like it will work anyway */ footer { box-sizing: border-box; height: auto; width: 100%; padding: 30px 0; background-color: black; color: white; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- structure dont matter much you will always have html and body tag just make sure to point to your footer as neede if you use html5 as it should just do nothing run plugin with no settings it will work by default with <footer> html5 tag --> <body> <div class="content"> <header> <nav> <ul> <li>link</li> <li>link</li> <li>link</li> <li>link</li> <li>link</li> <li>link</li> </ul> </nav> </header> <section> <p></p> <p>Lorem ipsum...</p> </section> </div> <footer> <p>Copyright 2009 Your name</p> <p>Copyright 2009 Your name</p> <p>Copyright 2009 Your name</p> </footer>

我知道一个古老的线程，但如果你正在寻找一个响应式的解决scheme，这个jQuery添加将有助于： 

 $(window).on('resize',sticky); $(document).bind("ready", function() { sticky(); }); function sticky() { var fh = $("footer").outerHeight(); $("#push").css({'height': fh}); $("#wrapper").css({'margin-bottom': -fh}); }

完整的指南可以在这里find： https : //pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

我创build了一个非常简单的库https://github.com/ravinderpayal/FooterJS

使用非常简单。 包含库后，只需调用这一行代码。 

 footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));

使用不同的参数/ ID可以调用上面的函数来dynamic改变页脚。 

 footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));

注意： – 您不必更改或添加任何CSS。 库是dynamic的，这意味着即使屏幕在加载页面后重新调整页脚的位置。 我已经创build了这个库，因为CSS解决了一段时间的问题，但是当显示尺寸变化很大时，从桌面到平板电脑，反之亦然，它们要么重叠内容，要么不再保持粘性。

另一个解决scheme是CSS Media Queries，但是您必须为不同大小的屏幕手动编写不同的CSS样式，而这个库自动完成工作，并且受到所有基本的JavaScript支持浏览器的支持。

编辑 CSS解决scheme： 

 @media only screen and (min-height: 768px) {/* or height/length of body content including footer*/ /* For mobile phones: */ #footer { width: 100%; position:fixed; bottom:0; } }

现在，如果显示的高度超过了你的内容长度，我们会将页脚固定在底部，如果不是，则会自动出现在显示的最后，因为您需要滚动查看。

而且，这似乎是一个比JavaScript /库更好的解决scheme。

我没有运气在这个页面上提出的解决scheme之前，但最后，这个小技巧的工作。 我将把它作为另一个可能的解决scheme。 

 footer { position: fixed; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; }

Flexbox解决scheme

Flex布局是自然页眉和页脚高度的首选。 这个灵活的解决scheme在现代浏览器中testing，实际上在IE11中工作:)。

见JS小提琴 。

HTML 

 <body> <header> ... </header> <main> ... </main> <footer> ... </footer> </body>

CSS 

 html { height: 100%; } body { height: 100%; min-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0; display: flex; flex-direction: column; } main { flex-grow: 1; flex-shrink: 0; } header, footer { flex: none; }

有时我自己也在苦苦挣扎，而且我总是发现，所有这些div的解决scheme都是一个混乱的解决scheme。 我只是混淆了一下，我个人发现这个工作，它当然是最简单的方法之一： 

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

我喜欢的是没有额外的HTML需要应用。 你可以简单地添加这个CSS，然后随时编写你的HTML

    Interesting Posts

    将页脚定位在具有固定页眉的页面底部