Html CSS 和 HTML5：将 <footer> 放在页面底部？没有包装？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7002490/
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
CSS & HTML5: Position a <footer> at the bottom of the page? no wrapper?
提问by matt
the age-old problem. I need to position a <footer>Element at the bottom of the page. However i don't have a wrapper div.
古老的问题。我需要<footer>在页面底部放置一个元素。但是我没有包装 div。
I'm do have the following stucture…
我确实有以下结构......
<body>
<header>
<section id="content">
<footer>
</body>
Is there an easy way to push the footer to the bottom if the content is not high enough?
如果内容不够高，是否有一种简单的方法可以将页脚推到底部？
采纳答案by Karl
AFAIK this is still the best way to get a footer to stick to the bottom of the page:
AFAIK 这仍然是让页脚粘在页面底部的最佳方式：
回答by Trace DeCoy
Came by this question, and thought I'd post what I've come across. Seems like the ideal way to me.
来到这个问题，并认为我会发布我遇到的问题。对我来说似乎是理想的方式。
CSS:
CSS：
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
HTML5:
HTML5：
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>
All credit goes to http://mystrd.at/modern-clean-css-sticky-footer/
回答by Marc B
Make it position: fixed; bottom: 0, height: xxx? Of course, then it'd overlap any content should the page actually go past the bottom of the window. Perhaps some JS to detect "short" content and set css as appropriate.
做到了position: fixed; bottom: 0, height: xxx吗？当然，如果页面实际上越过窗口底部，它会与任何内容重叠。也许一些 JS 来检测“短”内容并根据需要设置 css。
回答by ayyp
Depending on your code this may not work, but I'd suggest setting your bodyto position:relative;and then setting the footerto position:absolute;and bottom:0. In theory it won't overlap things then.
根据您的代码，这可能不起作用，但我建议您设置body为position:relative;，然后设置footer为position:absolute;和bottom:0。理论上它不会重叠。
回答by kuyabiye
i had made a jsfiddle before, check out this http://jsfiddle.net/kuyabiye/K5pYe/try resizin the result window, if the content will overflow the scroll will be seen.
我之前做过一个 jsfiddle，看看这个http://jsfiddle.net/kuyabiye/K5pYe/尝试调整结果窗口的大小，如果内容会溢出，就会看到滚动。
回答by Frank Zalkow
Here is a solution that works great for me. Sticky to bottom, no overlap with content, no need for a wrapper.
这是一个对我很有用的解决方案。粘在底部，不与内容重叠，不需要包装器。
https://jsfiddle.net/vq1kcedv/
https://jsfiddle.net/vq1kcedv/
html:
html：
<!DOCTYPE html>
<head>
<title>Footer</title>
</head>
<body>
<nav>Link1 Link2</nav>
<article>content</article>
<footer>Copyright</footer>
</body>
</html>
css:
css：
html, body {
position: absolute;
width: 100%;
min-height: 100%;
padding: 0;
margin: 0;
}
body:after {
line-height: 100px; /* height of footer */
white-space: pre;
content: "\A";
}
footer {
position: absolute;
width: 100%;
height: 100px; /* height of footer */
bottom: 0px;
margin-top: -100px; /* height of footer */
}
回答by Paul Lemarchand
I know it's an old post but I wanted to provide my own solution (with javascript) :
我知道这是一篇旧帖子，但我想提供我自己的解决方案（使用 javascript）：
/* css */
footer { width:100%; bottom:0; }
/* javascript */
if ($("body").height() < $(window).height()) {
document.querySelector('footer').style = 'position:absolute;'
}
It should work with any kind of footer of any size.
它应该适用于任何大小的任何类型的页脚。
EDIT : alternative solution ( no need for css) :
编辑：替代解决方案（不需要 css）：
/* footer */
if ($("body").height() < $(window).height()) { /* if the page is not long enouth, let's put some more margin to the footer */
var height = $(document).height() - $("body").height();
document.querySelector("footer").style.marginTop = height + "px";
}
回答by mdesdev
Check out the Fiddle
看看小提琴
HTML
HTML
<header>
</header>
<section id="content">
</section>
<footer>
</footer>
CSS
CSS
body {
height: 100%;
}
footer {
width: 100%;
height: 200px;
}
jQuery
jQuery
$(function() {
var footer = $('footer'),
footHgt = $('footer').outerHeight(),
bodyHgt = $('body').height();
footer
.css({
position: 'absolute',
left: '0',
top: bodyHgt - footHgt + 'px'
});
$(window).resize(function() {
var footer = $('footer'),
footHgt = $('footer').outerHeight(),
bodyHgt = $('body').height();
footer
.css({
position: 'absolute',
left: '0',
top: bodyHgt - footHgt + 'px'
});
});
});
