我正在学习网络开发,我根本无法弄清楚我在这方面做错了什么.我希望此页面的页脚粘贴到所有内容下方的底部,但不会在屏幕中固定.问题是当身体高度超过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;
}
这是我的第一个网页,我再一次在网上搜索并找到了许多解决方案,但却无法获得任何工作.另外,对不起我的英语,这不是我的母语.
div*_*993 21
我想这可能会对你有所帮助.
只是告诉你如何实现你想要的方式.
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的高度.
更新:
JSFiddle Demo可以玩.
由于我们现在有了Flexbox，因此可接受的答案可能有些过时。给容器一个min-height: 100vh和页脚一个，margin-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>