Html 添加始终显示在屏幕底部的页脚？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6170452/
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
Adding a footer that is always displayed at bottom of screen?
提问by Ciprian Radu
How can i add a footer that is always at the bottom of the screen even when the page contents are very small
即使页面内容非常小，我如何添加始终位于屏幕底部的页脚
e.g of problem, lets say I have a page that doesn't have that much on display in it, the footer therefore becomes in the middle of the screen. Can I ensure that if the page doesn't have a lot of contents then the footer just be at the bottom of the screen?
例如问题，假设我有一个页面显示的内容不多，因此页脚位于屏幕中间。我可以确保如果页面没有很多内容，那么页脚就在屏幕底部吗？
UPDATE
更新
I just want a footer that is at the bottom of the screen when there is not enough content to fill the whole screen (i.e I don't want the footer showing up in the middle of the screen) and then if there is enough content for it to just go down at the bottom of the page.
当没有足够的内容来填满整个屏幕时，我只想要一个位于屏幕底部的页脚（即我不希望页脚显示在屏幕中间），然后如果有足够的内容它只是在页面底部向下。
回答by thirtydot
You're after a "sticky footer", this article shows some of the techniques you can use:
您正在寻找“粘性页脚”，本文展示了您可以使用的一些技术：
Here's the flexbox version: http://codepen.io/chriscoyier/pen/RRbKrL
这是 flexbox 版本：http://codepen.io/chriscoyier/pen/RRbKrL
HTML:
HTML：
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
CSS:
CSS：
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
回答by Ciprian Radu
use the following css properties:
使用以下 css 属性：
position: fixed;
bottom: 0px;
回答by ZurabWeb
Here's a CSS only solution, no jQuery needed. Make the wrapper's minimum height 100% and position it relatively, then position footer absolutely to bottom left:
这是一个仅 CSS 的解决方案，不需要 jQuery。使包装器的最小高度为 100% 并相对定位，然后将页脚绝对定位到左下角：
#wrapper {
min-height:100%;
position:relative;
}
#content {
padding-bottom:80px;
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
}
回答by Joseph Hoxsey
You can also use sticky for the position as shown below:
您还可以对位置使用粘性，如下所示：
.footer {
position: sticky;
position: -webkit-sticky;
bottom: 0;
}
You can run this code to see if this is the type fixed footer you are looking for.
您可以运行此代码以查看这是否是您要查找的类型固定页脚。
body {
display: grid;
min-height: 100vh;
min-width: 100%;
grid-template: "header main" "footer footer";
grid-template-columns: 100px 1fr;
grid-template-rows: 1fr 50px;
grid-gap: 10px;
}
body>div {
background-color: rgba(0, 51, 204, 0.5);
}
.header {
grid-area: header
}
.main-content {
grid-area: main;
text-align: center;
}
.footer {
grid-area: footer;
position: sticky;
position: -webkit-sticky;
bottom: 0;
z-index: 10;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Footer Stay!</title>
<link rel="stylesheet" type="text/css" href="../style/footer.css">
</head>
<body>
<div class="header">
Header
</div>
<div class="main-content">main content</div>
<div class="footer">footer </div>
</body>
</html>回答by rashedcs
Use bootstrap class
使用引导类
<footer class="container-fluid text-center">
<div class="footer navbar-inverse navbar-fixed-bottom">
<p>Footer is here</p>
</div>
</footer>
回答by tjarratt
You'll want to use a fixed position element that is bound to the bottom of the page.
您需要使用绑定到页面底部的固定位置元素。
Say you use a div to encompass the footer, you'll want some css like this:
假设您使用 div 来包含页脚，您将需要一些这样的 css：
div#footer{
position: fixed;
z-index: 1000000;
overflow: hidden;
bottom: 0px;
left: 0px;
height: 100px;
width: 600px;
}
You'll probably want to update the height and width when a user resizes the form. You probably will need to resize the width on pageload as well.
当用户调整表单大小时，您可能希望更新高度和宽度。您可能还需要调整页面加载的宽度。
