我正在学习网络开发，我根本无法弄清楚我在这方面做错了什么。我希望此页面的页脚粘贴到所有内容下方的底部，但不会在屏幕中固定。问题是当身体高度超过100％时，页脚会停留在屏幕中间，而不是在底部。
我已经看过很多关于如何实现这个的教程，使用“position：absolute”+“bottom：0”和东西，但一切都失败了。
看看这个：
<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>
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
这是我的第一个网页，我再一次在网上搜索并找到了许多解决方案，但却无法获得任何工作。另外，对不起我的英语，这不是我的母语。
我想这可能会对你有所帮助。
只是告诉你如何实现你想要的方式。
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 -->确保#content上'padding-bottom'的值等于或大于#footer的高度。
更新：
你可以尝试这种造型;
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;
}
Here是一个演示
@ divy3993发布的答案有效但有时候页脚绝对会让它搁浅在页面中间。至少发生在我身上的事情。所以我做了一个小改动，我将在下面发布
#footer {
background: #ffab62;
width: 100%;
height: 100px;
position: relative; //make relative instead of absolute
bottom: 0;
left: 0;
}
这对我有用：当我尝试底部0和右边0时，页脚下方有一些恼人的底部边缘不会消失。我用top修正了它：100％并且绝对位置：
body{
height: 100%;
width: 100%;
position: relative;
}
footer{
background-image: linear-gradient(to right, #c10f3f, #010168);
padding: 1em;
width: 100%;
top: 100%;
position: absolute;
}
你的第一个错误就是在所有东西上使用绝对位置，在你不需要的许多东西上使用最小高度。
对于启动器只删除所有绝对的东西，并将min-height仅放在名为“body”的div中，之后默认情况下该页脚将粘贴到#body，之后你的页脚将不会飞到任何想要的地方。
在div中使用绝对值的最佳方法是： - 当你已经拥有相对位置的div时，然后你将另一个div放在具有相对位置的div内的绝对位置。
此外，如果您开始使用％，则仅使用像素值进行播放，您将会像现在一样迷路。