即使滚动，如何将页脚粘贴到底部（不固定） [英] How to stick footer to bottom (not fixed) even with scrolling
问题描述
我正在学习网络开发，而我根本无法弄清楚我在做什么错误。我希望此页面的页脚能够粘贴到底部，下面是所有内容，但不能固定在屏幕上。问题是当身体的高度超过100％时，页脚停留在屏幕中间，而不是在底部。
我已经看过很多关于如何实现这个的教程，使用position：absolute+bottom：0和东西，但一切都失败了。 p>
检查出来：
< html>
< head>
< meta charset =iso-8859-1/>
< link rel =stylesheettype =text / csshref =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>标题< / h1>
< / div>
< nav>
< ul>
< li>< h3>主页< / h3>< / li>
< li>< h3>文章< / h3>< / li>
< li>< h3> Perfil< / h3>< / li>
< li>< h3>设定< / 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>页脚< / p>
< / footer>
< div>
< / body>
CSS：
body {
font-family：'Arvo'，serif;
身高：100％;
保证金：0;
padding：0;
}
#wrapper {
min-height：100％;
}
标题{
position：absolute;
float：top;
宽度：100％;
身高：8％;
背景颜色：＃424242;
颜色：＃FFD740;
}
.title-div {
position：absolute;
身高：100％;
保证金：自动5％;
填充权：3％;
border-right：solid 2px＃FFD740;
}
header nav {
position：absolute;
宽度：75％;还剩
：15％;
}
header ul {
list-style：none outside none;
}
header ul li {
display：inline-block;
保证金：自动2％自动0;
}
#body {
padding：10px;
padding-top：8％;
填充底部：15％; / *页脚高度* /
}
页脚{
位置：绝对;
宽度：100％;
身高：15％;
right：0;
bottom：0;
剩下：0;
颜色：＃FFD740;
背景颜色：＃424242;
明确：两者;
}
这是我的第一个网页，我再次搜索网络，并找到了许多解决方案，但无法设法得到任何工作。此外，对我的英语感到抱歉，这不是我的母语。
>只是告诉你如何实现你想要的方式。
< div id =wrapper > < div id =header> < / DIV> <！ - #header - > < div id =content> < / DIV> <！ - #content - > < div id =footer> < / DIV> <！ - #footer - >< / div><！ - #wrapper - >
确保#content上'padding-bottom'的值等于或大于#footer的高度。
更新：
JSFiddle Demo 来玩。
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.
I've seen a lot of tutorials on how to achieve this, using "position: absolute" + "bottom: 0" and stuff, but everything failed.
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>
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.
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.
Update:
JSFiddle Demo to play around.
这篇关于即使滚动，如何将页脚粘贴到底部（不固定）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
