Html 即使滚动，如何将页脚粘贴到底部（不固定）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34796085/
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 stick footer to bottom (not fixed) even with scrolling
提问by Matheus Navarro Nienow
I'm learning web development and I simply can't figure out what I'm doing wrong on this. I want the footer of this page to stick to the bottom, below all content, but not fixed in the screen. The problem is that when the body has more than 100% of height, the footer stay in the middle of the screen, and not in the bottom.
我正在学习 Web 开发，但我无法弄清楚我在这方面做错了什么。我希望此页面的页脚贴在所有内容下方的底部，但不固定在屏幕上。问题是当 body 超过 100% 的高度时，footer 停留在屏幕中间，而不是底部。
I've seen a lot of tutorials on how to achieve this, using "position: absolute" + "bottom: 0" and stuff, but everything failed.
我看过很多关于如何实现这一点的教程，使用“位置：绝对”+“底部：0”等，但一切都失败了。
Check it out:
一探究竟：
<html>
<head>
<meta charset="iso-8859-1" />
<link rel="stylesheet" type="text/css" href="index.css" />
<link href='https://fonts.googleapis.com/css?family=Arvo|Open+Sans|Ubuntu+Roboto' rel='stylesheet' type='text/css'>
<title>Matheus's Page</title>
</head>
<body>
<div id="wrapper">
<header>
<div class="title-div">
<h1>Title</h1>
</div>
<nav>
<ul>
<li>
<h3>Home</h3>
</li>
<li>
<h3>Articles</h3>
</li>
<li>
<h3>Perfil</h3>
</li>
<li>
<h3>Settings</h3>
</li>
</ul>
</nav>
</header>
<div id="body">
<p>Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste </p>
</div>
<footer>
<p>Footer</p>
</footer>
<div>
</body>
</html>
CSS:
CSS：
body {
font-family: 'Arvo', serif;
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
}
header {
position: absolute;
float: top;
width: 100%;
height: 8%;
background-color: #424242;
color: #FFD740;
}
.title-div {
position: absolute;
height: 100%;
margin: auto 5%;
padding-right: 3%;
border-right: solid 2px #FFD740;
}
header nav {
position: absolute;
width: 75%;
left: 15%;
}
header ul {
list-style: none outside none;
}
header ul li {
display: inline-block;
margin: auto 2% auto 0;
}
#body {
padding: 10px;
padding-top: 8%;
padding-bottom: 15%; /* Height of the footer */
}
footer {
position: absolute;
width: 100%;
height: 15%;
right: 0;
bottom: 0;
left: 0;
color: #FFD740;
background-color: #424242;
clear: both;
}
link to printscreen of the result
This is my first webpage, and again, I've searched the web and found many solutions, but couldn't managed to get any working. Also, sorry for my English, it isn't my native language.
这是我的第一个网页，同样，我搜索了网络并找到了许多解决方案，但无法获得任何工作。另外，对不起我的英语，它不是我的母语。
回答by divy3993
I think this might help you.
我想这可能对你有帮助。
Just showing you the way how to achieve what you want.
只是向您展示如何实现您想要的方式。
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
}
#header {
background: #ededed;
padding: 10px;
}
#content {
padding-bottom: 100px;
/* Height of the footer element */
}
#footer {
background: #ffab62;
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
}<div id="wrapper">
<div id="header">
</div>
<!-- #header -->
<div id="content">
</div>
<!-- #content -->
<div id="footer">
</div>
<!-- #footer -->
</div>
<!-- #wrapper -->Make sure the value for 'padding-bottom' on #content is equal to or greater than the height of #footer.
确保#content 上'padding-bottom' 的值等于或大于#footer 的高度。
Update:
更新：
JSFiddle Demoto play around.
JSFiddle Demo来玩玩。
回答by Kees Hak
The accepted answer might be a bit outdated since we have Flexbox now. Give the container a min-height: 100vhand the footer a margin-top: autoso you don't have to deal with absolute positioning and fixed heights.
接受的答案可能有点过时，因为我们现在有了 Flexbox。给容器 amin-height: 100vh和页脚 amargin-top: auto这样你就不必处理绝对定位和固定高度。
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
background-color: #FFCCCC;
}
.content {
background-color: #CCFFCC;
}
.footer {
background-color: #CCCCFF;
margin-top: auto;
}<div class="container">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>回答by Kees Hak
This is what worked for me: When I tried bottom 0 and right 0, there was some annoying bottom margin below the footer which would not go away. I fixed it with top: 100% and position absolute:
这对我有用：当我尝试底部 0 和右侧 0 时，页脚下方有一些令人讨厌的底部边距，它不会消失。我用 top: 100% 和 position absolute 修复了它：
body{
height: 100%;
width: 100%;
position: relative;
}
footer{
background-image: linear-gradient(to right, #c10f3f, #010168);
padding: 1em;
width: 100%;
top: 100%;
position: absolute;
}
回答by Iasmini Gomes
I'm using Bootstrap 4 and this worked for me: https://www.youtube.com/watch?v=yc2olxLgKLk
我正在使用 Bootstrap 4，这对我有用：https: //www.youtube.com/watch?v=yc2olxLgKLk
I did this way in the CSS file:
我在 CSS 文件中这样做了：
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
footer{
padding: 3em;
margin-top: auto;
}
回答by Amey Bhivshet
the answer posted by @divy3993 works but sometimes making footer absolute keeps it stranded on the middle of the page. Atleast that's what had happened to me. So I made a small change, I'll post it below
@divy3993 发布的答案有效，但有时使页脚绝对使其滞留在页面中间。至少这就是发生在我身上的事情。所以我做了一个小改动，我会在下面发布
#footer {
background: #ffab62;
width: 100%;
height: 100px;
position: relative; //make relative instead of absolute
bottom: 0;
left: 0;
}
回答by blasteralfred Ψ
You may try this styling;
你可以试试这个造型；
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -100px;
padding-bottom: 100px;
}
header {
position: absolute;
float: top;
width: 100%;
height: 8%;
background-color: #424242;
color: #FFD740;
}
.title-div {
position: absolute;
height: 100%;
margin: auto 5%;
padding-right: 3%;
border-right: solid 2px #FFD740;
}
header nav {
position: absolute;
width: 75%;
left: 15%;
}
header ul {
list-style: none outside none;
}
header ul li{
display: inline-block;
margin: auto 2% auto 0;
}
footer {
height: 100px;
padding-top: 15px;
padding-left: 15px;
color: #FFD740;
background-color: #424242;
}
Hereis a demo
这是一个演示
回答by Dragana Curman
Your first mistakes are just using absolute position on everything and min-height on many stuff you don't need.
你的第一个错误只是在所有你不需要的东西上使用绝对位置和 min-height。
For starter just remove all absolute stuff and put min-height only in div named "body" after that footer will be glued to the #body by default, after that your footer won't be flying around where ever it wants.
对于初学者，只需删除所有绝对内容并将 min-height 仅放在名为“body”的 div 中，然后默认情况下该页脚将粘在 #body 上，之后您的页脚将不会在任何它想要的地方飞来飞去。
Best way to use absolute in divs is: - when you already have existing div with relative position, and then you put another div with an absolute position inside of a div with a relative position.
在 div 中使用绝对值的最佳方法是： - 当您已经拥有具有相对位置的现有 div，然后将另一个具有绝对位置的 div 放在具有相对位置的 div 内。
Also, play only with pixel values if you start going with % you will get lost like you already did.
此外，如果您开始使用 % ，则只使用像素值，您会像以前一样迷路。
