html - 试图将页脚移动到底部

Question

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，但它看起来仍然一样，在页脚后留下了大量空间。

Answer 1

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' */
} 

注意:您必须移除页脚元素的顶部和底部填充

jsFiddle