使用CSS使页面的页脚停留在底部

Question

I have a footer. I want this footer to always be at the bottom of the page. However, sometimes if an element above it is big, it doesnt go to the bottom. Does anyone have an idea how I can force the footer to always be at the bottom?

Here is the CSS I am using:

.footer {
position:absolute;
bottom:0;
width:100%;
background-color:#151211;
line-height: 16px;
padding: 0px 0px 20px 0px;
}
.footer .nav {
    float:left;
}
    .footer li {
        display:inline;
    }
    .footer li:before{
        color:#262320;
        content:" | ";
    }
    .footer li:first-child:before {
        content:"";
    }
.footer a:hover {
    color:#ffcc66;
}
.footer .nav a.login {
    background: url("../img/icon-lock.png") no-repeat 11px 5px #5c5a58;
    background-color: rgba(255,255,255,0.25);
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #262320;
    font-size: 10px;
    font-weight: bold;
    padding: 7px 9px 8px 32px;
    text-transform: uppercase;
}
.footer .nav a.login:hover {
    background-color: #939190;
    background-color: rgba(255,255,255,0.5);
}   
.copyright {
    color:#fff;
    font-size:16px;
    padding-top: 2px;
    text-align:right;
}
    .copyright span {
        color:#262320;
    }

And if it is useful, here is the html I am using:

<div class="footer">
        <div class="liner">
            <div class="nav">
                <ul>
                    <li><a href="http://removed/ui/faces/login.xhtml" class="login">Client Login</a></li>
                    <li><a href="contactus.php" class="">Contact</a></li>
                    <li><a href="termsofuse.php" class="">Terms of Service</a></li>
                    <li><a href="privacy.php" class="">Privacy Policy</a></li>
                    <li><div class="fb-like" data-href="https://www.facebook.com/pages/removed/412357755542469" data-width="50" data-height="50" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="false" data-send="true" style="top: 10px;"></div></li>
                    <li><a href="https://twitter.com/removed" class="twitter-follow-button" data-show-count="false">Follow @removed</a>
                        <script>!function(d, s, id) {
                                var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
                                if (!d.getElementById(id)) {
                                    js = d.createElement(s);
                                    js.id = id;
                                    js.src = p + '://platform.twitter.com/widgets.js';
                                    fjs.parentNode.insertBefore(js, fjs);
                                }
                            }(document, 'script', 'twitter-wjs');</script></li>
                </ul>
            </div> <!-- .nav -->
            <p class="copyright">&copy; Copyright 2013  <span>|</span>removed</p>
        </div> <!-- .liner -->
    </div> <!-- .footer -->

Answer 1

您可能会发现查看与以下与粘性问题相关的问题的答案很有价值： 页面底部的固定页脚

Answer 2

A sticky footer can be done with absolute positioning. You put the footer into a container, which uses 100% height and pin the footer at the bottom

<div class="container">
    <div class="footer">Footer</div>
</div>

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    min-height: 100%;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    clear: both;
    color: white;
    background-color: blue;
    height: 25px;
}

JSFiddle