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 body
to position:relative;
and then setting the footer
to 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'
});
});
});