CSS 使 HTML 页面页脚以最小高度停留在页面底部，但不与页面重叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/643879/
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 to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page
提问by Caveatrob
I had the following page (deadlink: http://www.workingstorage.com/Sample.htm) that has a footer that I can't make sit at the bottom of the page.
我有以下页面（死链接：）http://www.workingstorage.com/Sample.htm，其中有一个页脚，我无法将其放置在页面底部。
I want the footer to
我想要页脚
- stick to the window bottom when the page is short and the screen is not filled, and
- stay at the document end and move down as normal when there is more than a screenful of content (instead of overlapping the content).
- 页面短且屏幕未填满时粘在窗口底部，以及
- 当内容超过一屏（而不是重叠内容）时，停留在文档末尾并正常向下移动。
The CSS is inherited and befuddles me; I can't seem to change it properly to put a minimum height on the content or make the footer go to the bottom.
CSS 是继承的，让我很困惑；我似乎无法正确更改它以在内容上设置最小高度或使页脚移到底部。
采纳答案by Jon Winstanley
A simple method is to make the body 100%of your page, with a min-heightof 100%too. This works fine if the height of your footer does not change.
一个简单的方法是制作100%页面的正文，也带有一个min-heightof 100%。如果页脚的高度没有改变，这可以正常工作。
Give the footer a negative margin-top:
给页脚一个负边距顶部：
footer {
clear: both;
position: relative;
height: 200px;
margin-top: -200px;
}
回答by vsync
I've developed quite an easy method to stick the Footer at the bottom, but as most common methods, you will need to tweak it to fit your Footer's height.
我开发了一种非常简单的方法来将页脚粘贴在底部，但作为最常见的方法，您需要调整它以适合页脚的高度。
VIEW DEMO
查看演示
Flexbox method:
弹性盒方法：
html, body{ height:100%; margin:0; }
header{ height:50px; background:lightcyan; }
footer{ height:50px; background:PapayaWhip; }
/* Trick */
body{
display:flex;
flex-direction:column;
}
footer{
margin-top:auto;
}
<body>
<header>Header</header>
<article>Content</article>
<footer>Footer</footer>
</body>This method below uses a "trick" by placing an ::afterpseudo-element on the body, and set it to have the exactheight of the footer, so it will occupy the exact same space the footer does, so when the footer is absolutepositioned over it, it would appear like the footer is really taking up space and eliminate the negative affects of it's absolute positioning (for example, going over the body's content)
下面的这个方法通过在 上放置一个::after伪元素来使用“技巧”，并将其body设置为具有页脚的确切高度，因此它将占据与页脚完全相同的空间，因此当页脚absolute位于其上方时，看起来页脚确实占用了空间并消除了其绝对定位的负面影响（例如，遍历正文的内容）
position:absolutemethod: (doesn't allow dynamic footer height)
position:absolute方法：（不允许动态页脚高度）
html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
header{ height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }
/* Trick: */
body {
position: relative;
}
body::after {
content: '';
display: block;
height: 50px; /* Set same as footer's height */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}<body>
<header>Header</header>
<article>Content</article>
<footer>Footer</footer>
</body>Table-layout method:
表格布局方法：
html,body { height: 100%; margin: 0; }
header {
height: 50px;
background: lightcyan;
}
footer {
height: 50px;
background: PapayaWhip;
}
/**** Trick: ****/
body {
display: table;
width: 100%;
}
footer {
display: table-row;
}<body>
<header>Header</header>
<article>Content</article>
<footer>Footer</footer>
</body>回答by Tamás Pap
A very simple approach which works great cross browser is this:
一个非常简单的方法可以很好地跨浏览器是这样的：
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
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;
}<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>回答by N. Larrieux
I've used this to stick my footer to the bottom and it worked for me:
我用它把我的页脚粘在底部，它对我有用：
HTML
HTML
<body>
<div class="allButFooter">
<!-- Your page's content goes here, including header, nav, aside, everything -->
</div>
<footer>
<!-- Footer content -->
</footer>
</body>
That's the only modification you have to do in the HTML, add that divwith the "allButFooter"class. I did it with all the pages, those that were so short, I knew the footer wouldn't stick to the bottom, and also pages long enough that I already knew I had to scroll. I did this, so I could see that it works ok in the case that a page's content is dynamic.
这是您必须在 HTML 中进行的唯一修改，将其添加div到"allButFooter"类中。我对所有页面都这样做了，那些很短的页面，我知道页脚不会粘在底部，还有足够长的页面，我已经知道我必须滚动。我这样做了，所以我可以看到它在页面内容是动态的情况下可以正常工作。
CSS
CSS
.allButFooter {
min-height: calc(100vh - 40px);
}
The "allButFooter"class has a min-heightvalue that depends on the viewport's height (100vhmeans 100% of the viewport height) and the footer's height, that I already knew was 40px.
本"allButFooter"类有一个min-height依赖于视口的高度值（100vh指视口高度的100％）和页脚的高度，我已经知道了40px。
That's all I did, and it worked perfectly for me. I haven't tried it in every browser, just Firefox, Chrome and Edge, and the results were as I wanted. The footer sticks to the bottom, and you don't have to mess with z-index, position, or any other properties. The position of every element in my document was the default position, I didn't change it to absolute or fixed or anything.
这就是我所做的一切，它对我来说非常有效。我没有在每个浏览器中都尝试过，只有 Firefox、Chrome 和 Edge，结果如我所愿。页脚贴在底部，您不必弄乱 z-index、位置或任何其他属性。我的文档中每个元素的位置都是默认位置，我没有将其更改为绝对或固定或任何其他内容。
Working with responsive design
使用响应式设计
Here's something I would like to clear out. This solution, with the same Footer that was 40px high didn't work as I expected when I was working in a responsive design using Twitter-Bootstrap. I had to modify the value I was substracting in the function:
这是我想澄清的事情。当我在响应式设计中使用Twitter-Bootstrap. 我不得不修改我在函数中减去的值：
.allButFooter {
min-height: calc(100vh - 95px);
}
This is probably because Twitter-Bootstrapcomes with its own margins and paddings, so that's why I had to adjust that value.
这可能是因为Twitter-Bootstrap它有自己的边距和填充，所以这就是我必须调整该值的原因。
I hope this is of some use for you guys! At least, it's a simple solution to try, and it doesn't involve making big changes to the whole document.
我希望这对你们有用！至少，这是一个可以尝试的简单解决方案，并且不需要对整个文档进行大的改动。
回答by Liam
回答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 Jose Rui Santos
Yet, another really simple solution is this one:
然而，另一个非常简单的解决方案是：
html, body {
height: 100%;
width: 100%;
margin: 0;
display: table;
}
footer {
background-color: grey;
display: table-row;
height: 0;
}
The trick is to use a display:tablefor the whole document and display:table-rowwith height:0for the footer.
诀窍是对display:table整个文档使用 a并为页脚display:table-row使用 with height:0。
Since the footer is the only body child that has a display as table-row, it is rendered at the bottom of the page.
由于页脚是唯一一个显示为 的 body 子元素table-row，因此它呈现在页面底部。
回答by Ben Hymanson
One thing to be wary of is mobile devices, since they implement the idea of the viewport in an 'unusual' way:
需要警惕的一件事是移动设备，因为它们以“不寻常”的方式实现了视口的想法：
As such, using position: fixed;(as i've seen recommended in other places) usually isn't the way to go. Of course, it depends upon the exact behaviour you're after.
因此，使用position: fixed;（正如我在其他地方看到的推荐）通常不是正确的方法。当然，这取决于您所追求的确切行为。
What I've used, and has worked well on desktop and mobile, is:
我使用过的并且在桌面和移动设备上运行良好的是：
<body>
<div id="footer"></div>
</body>
with
和
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
}
#footer {
position: absolute;
bottom: 0;
}
回答by Aarth Tandel
Do this
做这个
<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>
You can also read about flex it is supported by all modern browsers
您还可以阅读所有现代浏览器都支持的 flex
Update: I read about flex and tried it. It worked for me. Hope it does the same for you. Here is how I implemented.Here main is not the ID it is the div
更新：我阅读了 flex 并尝试了它。它对我有用。希望它对你也一样。这是我的实现方式。这里的 main 不是 ID，而是 div
body {
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
display: block;
flex: 1 0 auto;
}
Here you can read more about flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/
在这里你可以阅读更多关于 flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Do keep in mind it is not supported by older versions of IE.
请记住，旧版本的 IE 不支持它。
回答by Paolo Bergantino
This is known as a sticky footer. A google searchfor it comes up with a lot of results. A CSS Sticky Footeris the one I've used successfully. But there are more.
这被称为粘性页脚。一个谷歌搜索它来了一个很大的成果。CSS Sticky Footer是我成功使用的一种。但还有更多。
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>