javascript 使页脚高度延伸到页面底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9304252/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make footer height extend to bottom of the page
提问by sazr
I have a very simple webpage with a problem. It ahs 3 divs that sit ontop of each other, the header, content then footer.
我有一个非常简单的网页有问题。它 ahs 3 个 div，它们彼此重叠，页眉，内容然后页脚。
I want my footers height to expand to the bottom of the page. How can I do this?
我希望我的页脚高度扩展到页面底部。我怎样才能做到这一点？
The header has a constant height, the content will vary in height depending on the content received from an AJAX call. So I cant explicitly set it.
标题具有恒定的高度，内容的高度将根据从 AJAX 调用接收到的内容而变化。所以我不能明确设置它。
Heres my JSFiddle: http://jsfiddle.net/5U6ZB/2/embedded/result/
这是我的 JSFiddle：http: //jsfiddle.net/5U6ZB/2/embedded/result/
<div id="header"></div>
<div id="content">
<!-- height is dynamic sometimes it will be full of divs that makes it
longer than the screen height other times it only has 1 div -->
</div>
<div id="footer">
<!-- How do I make the footer height fill up the rest of the page height? -->
</div>
body { background-color: white; }
div { width: 100%; }
#header {
height: 400px;
background-color: RGB(200,200,200);
}
#content {
}
#footer {
background-color: RGB(112,112,112);
/*How do I make the footer height fill up the rest of the page height?*/
}
回答by steve
html {
background-color:#093; /*the footer color*/
}
body {
background-color: #f6f; /*the body color*/
}
回答by SynXsiS
Sounds like the easiest solution in your case would be to make the body background the same colour as the footer and make your content white. This would give the illusion of the footer going all the way to the bottom.
在您的情况下，听起来最简单的解决方案是使正文背景与页脚的颜色相同，并使您的内容为白色。这会产生页脚一直到底部的错觉。
body { background-color:RGB(112,112,112); }
div { width: 100%; } /* Divs are block elements which automatically take 100% width so this is redundant. */
#header {
height: 400px;
background-color: RGB(200,200,200);
}
#content {
background-color:white;
}
#footer {
background-color: RGB(112,112,112);
}
回答by user3115008
:root {
background-color: siteBackgroundColor;
}
body {
background-color: footerColor;
}
This doesn't really expand the footer, but visually expands its background color.
这并没有真正扩展页脚，而是在视觉上扩展了它的背景颜色。
回答by pspahn
A similar approach to fayerth's, this will adjust height dynamically when the browser is resized (and is based on jQuery).
与 fayerth 的方法类似，这将在调整浏览器大小时动态调整高度（并且基于 jQuery）。
Instead of resizing the footer directly, I added the additional empty element <div class="flex-footer">and resized that instead. My thought is that it should give a less jittery effect if the footer contains a bunch of elements as well as not fussing with any children of the footer that are sized relative to the parent.
我没有直接调整页脚的<div class="flex-footer">大小，而是添加了额外的空元素并调整了它的大小。我的想法是，如果页脚包含一堆元素，并且不与相对于父级大小的页脚的任何子级大惊小怪，它应该会产生较少的抖动效果。
Your CSS should then apply whatever background color necessary.
然后你的 CSS 应该应用任何必要的背景颜色。
Note my comment about negative margins. This was necessary in my case since the design required the use of negative margins. I've included that bit in case yours does as well.
请注意我对负边距的评论。这对我来说是必要的，因为设计需要使用负边距。我已经包括了这一点，以防万一你的也是如此。
$(function(){
$(window).load(resizeFooter);
$(window).resize(resizeFooter);
});
// Dynamically resize footer to fill page, IE8 doesn't like this.
function resizeFooter() {
var windowHeight = window.innerHeight;
var headerHeight = $("header").height();
var contentHeight = $("div.main").height();
var footerHeight = $("footer").height();
// 107 references a negative margin in header - you'll need to account for this if necessary
var flexFooter = windowHeight - (headerHeight + contentHeight + footerHeight - 107);
$(".flex-footer").css("min-height", flexFooter);
}
回答by Hiram Pachicano
very simple, and works for me :)
非常简单，对我有用:)
footer{ position:absolute; width:100%; top: (read below); }
页脚{位置：绝对；宽度：100%；顶部：（阅读下文）；}
you can try with diferent percents values in top property, when the footer take the desired place in your screen, that percent will apply to all resolutions :)
您可以尝试在 top 属性中使用不同的百分比值，当页脚在屏幕中占据所需位置时，该百分比将适用于所有分辨率:)
回答by seeming.amusing
In pure CSS, it's not possible, but if you want to use some fancy Javascript, you can dynamically change the height of the footer to stretch the remaining height, assuming the content doesn't already do it for you.
在纯 CSS 中，这是不可能的，但是如果您想使用一些花哨的 Javascript，您可以动态更改页脚的高度以拉伸剩余的高度，假设内容尚未为您完成。
var header = document.getElementById("header"),
content = document.getElementById("content"),
footer = document.getElementById("footer"),
height = window.screen.height - header.clientHeight - content.clientHeight;
footer.clientHeight = (height < 150) ? 150 : height; // Sets a minimum height of 150px
It's usually better to follow SynXsiS's suggestion though, as it tends to give a nicer appearance. In the end, it really depends on the way you design the look and feel of your page.
不过，遵循 SynXsiS 的建议通常会更好，因为它往往会提供更好的外观。最后，这实际上取决于您设计页面外观的方式。
回答by claudybee
I am tweaking a wordpress theme - and have the same problem. But - if I implement a sticky footer, it actually partially scrolls away with the content. Wordpress is a mess so I'm not sure why it's doing this - but what I need is to let the footer sit below the main content, but THEN fill the rest of the screen so it doesn't look silly on shorter pages.
我正在调整 wordpress 主题 - 并且遇到了同样的问题。但是 - 如果我实现了一个粘性页脚，它实际上会随着内容部分滚动。Wordpress 一团糟，所以我不知道为什么要这样做 - 但我需要的是让页脚位于主要内容下方，然后填充屏幕的其余部分，这样它在较短的页面上看起来就不会很傻。
Any ideas of an easy CSS fix other than the color trick? (which I may do ;)
除了颜色技巧之外，还有其他简单的 CSS 修复方法吗？（我可以这样做；）
Claudia
克劳迪娅
