Html 如何将页脚（div）与页面底部对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3525581/
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 align footer (div) to the bottom of the page?
提问by Joey Morani
Can anyone explain how to align a footer div to the bottom of the page. From the examples I've seen, they all show how to make the div stay visible at the bottom, no matter where you've scrolled the page. Although I don't want it like that. I want it fixed at the bottom of the page, so it doesn't move. Appreciate the help!
任何人都可以解释如何将页脚 div 与页面底部对齐。从我看到的例子来看，它们都展示了如何让 div 保持在底部可见，无论你在哪里滚动页面。虽然我不想那样。我希望它固定在页面底部，所以它不会移动。感谢帮助！
回答by Hristo
UPDATE
更新
My original answer is from a long time ago, and the links are broken; updating it so that it continues to be useful.
我原来的回答是很久以前的，链接失效了；更新它，使其继续有用。
I'm including updated solutions inline, as well as a working examples on JSFiddle. Note: I'm relying on a CSS reset, though I'm not including those styles inline. Refer to normalize.css
我包括更新的内联解决方案，以及关于 JSFiddle 的工作示例。注意：我依赖于 CSS 重置，但我没有将这些样式包含在内。参考normalize.css
Solution 1 - margin offset
解决方案 1 - 保证金抵消
https://jsfiddle.net/UnsungHero97/ur20fndv/2/
https://jsfiddle.net/UnsungHero97/ur20fndv/2/
HTML
HTML
<div id="wrapper">
<div id="content">
<h1>Hello, World!</h1>
</div>
</div>
<footer id="footer">
<div id="footer-content">Sticky Footer</div>
</footer>
CSS
CSS
html, body {
margin: 0px;
padding: 0px;
min-height: 100%;
height: 100%;
}
#wrapper {
background-color: #e3f2fd;
min-height: 100%;
height: auto !important;
margin-bottom: -50px; /* the bottom margin is the negative value of the footer's total height */
}
#wrapper:after {
content: "";
display: block;
height: 50px; /* the footer's total height */
}
#content {
height: 100%;
}
#footer {
height: 50px; /* the footer's total height */
}
#footer-content {
background-color: #f3e5f5;
border: 1px solid #ab47bc;
height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
padding: 8px;
}
Solution 2 - flexbox
解决方案 2 - flexbox
https://jsfiddle.net/UnsungHero97/oqom5e5m/3/
https://jsfiddle.net/UnsungHero97/oqom5e5m/3/
HTML
HTML
<div id="content">
<h1>Hello, World!</h1>
</div>
<footer id="footer">Sticky Footer</footer>
CSS
CSS
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
#content {
background-color: #e3f2fd;
flex: 1;
padding: 20px;
}
#footer {
background-color: #f3e5f5;
padding: 20px;
}
Here's some links with more detailed explanations and different approaches:
以下是一些包含更详细解释和不同方法的链接：
- https://css-tricks.com/couple-takes-sticky-footer/
- https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
- http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
- https://css-tricks.com/couple-takes-sticky-footer/
- https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
- http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
ORIGINAL ANSWER
原答案
Is this what you mean?
你是这个意思吗？
http://ryanfait.com/sticky-footer/
http://ryanfait.com/sticky-footer/
This method uses only 15 lines of CSS and hardly any HTML markup. Even better, it's completely valid CSS, and it works in all major browsers. Internet Explorer 5 and up, Firefox, Safari, Opera and more.
此方法仅使用 15 行 CSS，几乎没有任何 HTML 标记。更好的是，它是完全有效的 CSS，并且适用于所有主要浏览器。Internet Explorer 5 及更高版本、Firefox、Safari、Opera 等。
This footer will stay at the bottom of the page permanently. This means that if the content is more than the height of the browser window, you will need to scroll down to see the footer... but if the content is less than the height of the browser window, the footer will stick to the bottom of the browser window instead of floating up in the middle of the page.
此页脚将永久保留在页面底部。这意味着如果内容大于浏览器窗口的高度，您将需要向下滚动才能看到页脚...但如果内容小于浏览器窗口的高度，页脚将粘在底部浏览器窗口，而不是在页面中间浮动。
Let me know if you need help with the implementation. I hope this helps.
如果您在实施方面需要帮助，请告诉我。我希望这有帮助。
回答by ovais.tariq
This will make the div fixed at the bottom of the page but in case the page is long it will only be visible when you scroll down.
这将使 div 固定在页面底部，但如果页面很长，它只会在您向下滚动时可见。
<style type="text/css">
#footer {
position : absolute;
bottom : 0;
height : 40px;
margin-top : 40px;
}
</style>
<div id="footer">I am footer</div>
The height and margin-top should be the same so that the footer doesnt show over the content.
高度和 margin-top 应该相同，以便页脚不会显示在内容上。
回答by Jason George
Your title and comments imply that you weren't looking for a sticky footer (stuck to the bottom of the window as content scrolls below it). I assume you were looking for a footer that would be forced to the bottom of the window if the content does not fill the window, and push down to the bottom of the content if the content exceeds the window boundary.
您的标题和评论暗示您不是在寻找粘性页脚（当内容滚动到窗口底部时，它会卡在窗口底部）。我假设您正在寻找一个页脚，如果内容没有填满窗口，它将被强制到窗口底部，如果内容超出窗口边界，则向下推到内容的底部。
You can accomplish this with the following.
您可以通过以下方式完成此操作。
<style>
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
</style>
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>Source: How to keep footers at the bottom of the page
来源：如何将页脚保留在页面底部
回答by Jason George
Use <div style="position:fixed;bottom:0;height:auto;margin-top:40px;width:100%;text-align:center">I am footer</div>. Footer will not go upwards
使用<div style="position:fixed;bottom:0;height:auto;margin-top:40px;width:100%;text-align:center">I am footer</div>. 页脚不会向上
回答by Vinay B R
check this out, works on firefox and IE
看看这个，适用于 Firefox 和 IE
<style>
html, body
{
height: 100%;
}
.content
{
min-height: 100%;
}
.footer
{
position: relative;
clear: both;
}
</style>
<body>
<div class="content">Page content
</div>
<div class="footer">this is my footer
</div>
</body>
回答by Sanjeev
A simple solution that i use, works from IE8+
我使用的一个简单的解决方案，适用于 IE8+
Give min-height:100% on html so that if content is less then still page takes full view-port height and footer sticks at bottom of page. When content increases the footer shifts down with content and keep sticking to bottom.
在 html 上给出 min-height:100% 以便如果内容较少，则静止页面将采用完整的视口高度，而页脚则停留在页面底部。当内容增加时，页脚随着内容向下移动并保持在底部。
JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/
JS小提琴工作演示：http: //jsfiddle.net/3L3h64qo/2/
Css
css
html{
position:relative;
min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
margin:0;
padding:0;
}
.pageContentWrapper{
margin-bottom:100px;/* Height of footer*/
}
.footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height:100px;
background:#ccc;
}
Html
html
<html>
<body>
<div class="pageContentWrapper">
<!-- All the page content goes here-->
</div>
<div class="footer">
</div>
</body>
</html>
回答by Jamie
I am a newbie and these methods are not working for me. However, I tried a margin-top property in css and simply added the value of content pixels +5.
我是新手，这些方法对我不起作用。但是，我在 css 中尝试了一个 margin-top 属性，并简单地添加了内容像素 +5 的值。
Example: my content layout had a height of 1000px so I put a margin-top value of 1005px in the footer css which gave me a 5px border and a footer that sits delightfully at the bottom of my site.
示例：我的内容布局的高度为 1000 像素，因此我在页脚 css 中放置了 1005 像素的边距顶部值，这给了我一个 5 像素的边框和一个位于我网站底部的页脚。
Probably an amateur way of doing it, but EFFECTIVE!!!
可能是一种业余的做法，但有效！！！
