Html 当内容很短或丢失时，如何将页脚推到页面底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4575826/
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
How to push a footer to the bottom of page when content is short or missing?
提问by Will Curran
I have a page with an outer div that wraps a header, content and footer div. I want the footer div to hug the bottom of the browser, even when the content div is not tall enough to fill the viewable area (i.e. there's no scrolling).
我有一个带有外部 div 的页面，该页面包含页眉、内容和页脚 div。我希望页脚 div 紧贴浏览器的底部，即使内容 div 不够高以填充可视区域（即没有滚动）。
回答by Luke Flournoy
Your issue can be easily fixed by using flexbox. Just wrap your .container and your .footer in a flex container with a min-height: 100vh, switch the direction to column so that they stack on top of each other, and justify the content with space between so that footer will move to the bottom.
使用 flexbox 可以轻松解决您的问题。只需将您的 .container 和您的 .footer 包装在一个最小高度为 100vh 的 flex 容器中，将方向切换到列，使它们彼此堆叠，并用空间对齐内容，以便页脚将移动到底部。
.flex-wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
justify-content: space-between
}<div class="flex-wrapper">
<div class="container">The content</div>
<div class="footer">The Footer</div>
</div>回答by Jahmic
What I wanted was to have the footer be at the bottom of browser view ONLY IF the content was not long enough to fill up the browser window (non-sticky).
我想要的是让页脚位于浏览器视图的底部，仅当内容不够长以填满浏览器窗口（非粘性）时。
I was able to achieve by using the CSS function calc(). Which is supported by all modern browsers. You could use like:
我能够通过使用 CSS 函数 calc() 来实现。所有现代浏览器都支持。你可以使用像：
<div class="container">CONTENT</div>
<div class="footer">FOOTER</div>
the css:
css：
.container
{
min-height: 70%;
min-height: -webkit-calc(100% - 186px);
min-height: -moz-calc(100% - 186px);
min-height: calc(100% - 186px);
}
Change 186 to the size of your footer.
将 186 更改为页脚的大小。
回答by haha
Example : http://jsfiddle.net/AU6yD/
示例：http: //jsfiddle.net/AU6yD/
html, body { height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -30px; }
#bottom, #push { height:30px;}
body { background:#333;}
#header { height:30px; background:#000; color:#fff; }
#footer { height:30px; background:#000; color:#fff; }<div id="wrapper">
<div id="header">
Header
</div>
<div id="push"></div>
</div>
<div id="bottom">
<div id="footer">
Footer
</div>
</div>回答by Healyhatman
I did what Jahmic up top did (won't let me comment yet) except I had to use VH instead of % since I couldn't just apply it to a container class.
我做了 Jahmic up top 做的事情（暂时不让我评论），除了我必须使用 VH 而不是 % 因为我不能将它应用于容器类。
#inner-body-wrapper
{
min-height: 70vh;
min-height: -webkit-calc(100vh - 186px);
min-height: -moz-calc(100vh - 186px);
min-height: calc(100vh - 186px);
}
回答by nnattawat
To make it work responsively when the footer is taller on mobile devices compare to on desktop, you can't really know the footer height. One way to do it is to stretch the footer out to cover the entire screen.
当移动设备上的页脚比台式机上的页脚高时，要使其响应式工作，您无法真正知道页脚高度。一种方法是拉伸页脚以覆盖整个屏幕。
html,
body {
height: 100%;
}
.container {
min-height: 80%;
background-color: #f3f3f3;
}
.footer {
background-color: #cccccc;
box-shadow: 0px 500px 0px 500px #cccccc;
}<div class="container">Main content</div>
<div class="footer">Footer</div>回答by Neal Bozeman
The absolute simplest way without tricks, wrappers, and possible in any layout because you can use the body tag. I can't believe it's always overlooked. Here is my "goto" way, using inline styles for simplicity. You can extract as you need:
绝对最简单的方法，无需技巧、包装器，并且可以在任何布局中使用，因为您可以使用 body 标签。我不敢相信它总是被忽视。这是我的“转到”方式，为了简单起见，使用内联样式。您可以根据需要提取：
<body style="min-height: 100vh; display: flex; flex-direction: column;">
Any content you want,
put it here. Can be wrapped,
nested, whatever.
<div style="flex-grow:1"></div>
<!-- Any content below this will always be at bottom. -->
<footer>Always way at the bottom</footer>
</body>
The "genius" is in the the blank div that simply fills the screen right before the footer.
“天才”在空白 div 中，它只是在页脚之前填满屏幕。
回答by AbdessamadEL
You do exactly what you want using Flexbox
您可以使用 Flexbox 做您想做的事
as an example will be:
例如：
html, body {
height: 100%
width: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
.content {
flex-grow: 1;
}
as a note the footer must be outside the contentelement
请注意，页脚必须在内容元素之外
html structure will be something like follow:
html 结构将类似于以下内容：
<html>
<body>
<div class="wrapper">
<header></header>
<div class="content">
<!-- Content -->
</div>
<footer></footer>
</div>
</body>
</html>
回答by Asad
I've solved same problem with jquery
我用 jquery 解决了同样的问题
var windowHeiht = $(window).height();
var footerPosition = $("#asd-footer").position()['top'];
if (windowHeiht > footerPosition) {
$("#asd-footer").css("position", "absolute");
$("#asd-footer").css("bottom", "0");
$("#asd-footer").css("width", "100%");
}
回答by George
Reworking the jQuery solution. I have it working with resizing the window. When the window is bigger than the page, the footer style's position is "absolute" fixed at the bottom the window. When the window is smaller than the page, the footer stays at the bottom of the page - scrolling off the bottom.
重新设计 jQuery 解决方案。我让它调整窗口大小。当窗口大于页面时，页脚样式的位置“绝对”固定在窗口底部。当窗口小于页面时，页脚停留在页面底部 - 从底部滚动。
<style>
.FooterBottom {
width:100%;
bottom: 0;
position: absolute;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
FooterPosition();
$(window).resize(function () {
FooterPosition();
});
});
var originalFooterBottom = 0;
function FooterPosition() {
var windowHeight = $(window).height();
if (originalFooterBottom == 0) {
var footer = $("#Footer");
originalFooterBottom = footer.position()['top'] + footer.height();
}
if (windowHeight > originalFooterBottom) {
var footerElement = document.getElementById("Footer");
if (!footerElement.classList.contains('FooterBottom')) {
footerElement.classList.add('FooterBottom');
}
}
else {
var footerElement = document.getElementById("Footer");
if (footerElement.classList.contains('FooterBottom')) {
footerElement.classList.remove('FooterBottom');
}
}
}
</script>I tried many style only solutions but none of them worked. This Javascript/Style solution works just fine for me, even with its odd mix of jQuery and GetElement.
我尝试了很多风格的解决方案，但没有一个奏效。这个 Javascript/Style 解决方案对我来说很好用，即使它奇怪地混合了 jQuery 和 GetElement。
Thanks to Asad for his post.
感谢 Asad 的帖子。
回答by Ruben Morales Felix
I tried: http://jsfiddle.net/AU6yD/as here it's the best option but I had problems when the content of the <div id="wrapper">started to get too big see
evidence.png, what I did to solve this was refreshing the body size everytime I changed the content of that div like this:
我试过：http: //jsfiddle.net/AU6yD/因为这里是最好的选择，但是当内容<div id="wrapper">开始变得太大时我遇到了问题请参阅
evidence.png，我为解决这个问题所做的就是每次都刷新身体大小我像这样改变了那个 div 的内容：
var body = document.body,
html = document.documentElement;
body.style.height = 100 + "%";
setTimeout(function(){
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight,
html.offsetHeight );
body.style.height = height + "px";
}, 500);
