html, body{
margin: 0;
padding: 0;
height: 100%;
background-color: #23395b;
}
footer{
background-color: #012a36;
position: absolute;
width: 100%;
bottom: -300px;
margin-top: -200px;
height: 80px;
clear:both;
padding-top:5px;
padding-bottom: 5px;
}
footer ul{
text-align: center;
padding-top: 2%;
}
footer li{
list-style: none;
display: inline;
padding: 2%;
}
footer a{
text-decoration: none;
color: white;
}
footer a:hover{
color: #00cecb;
text-decoration: none;
}
<footer class="footer">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="index.html">HOW IT WORKS</a></li>
<li><a href="index.html">CONTACT</a></li>
<li><a href="index.html">HELP</a></li>
</ul>
</footer>
试图将页脚移动到页面底部。我在位置上添加了绝对值,但是当我更改底部测量值时 body/html 增加了。我添加了 div id = wrap,但它看起来仍然一样,在页脚后留下了大量空间。
最佳答案
Ryan Fait 的 Stick Footer :
* {
margin: 0;
}
html,
body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin: 0 auto -80px;
/* the bottom margin is the negative value of the footer's height */
}
footer,
.push {
height: 80px;
/* '.push' must be the same height as 'footer' */
}
注意:您必须移除页脚元素的顶部和底部填充
关于html - 试图将页脚移动到底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35823013/