固定底部1）

by gothic

HTML

<div class="page-wrap">
    content
</div>
<footer class="site-footer">
    我要固定在底部
</footer>

CSS

html,body {
        height: 100%;
    }
    .page-wrap {
        min-height: 100%;
        margin-bottom: -142px;
    }
    .page-wrap:after {
        content: "";
        display: block;
    }
    .site-footer, .page-wrap:after {
        height: 142px;
    }
    .site-footer {
        background-color: #f00;
    }