1，代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>不足一屏时，页面底部位于浏览器底部</title>
    <style type="text/css">
    * { 
        margin:0; 
        padding:0;
    }

    html, body {
        height:100%;
    }

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

    .header {
        height:50px;
        background-color:#28323C;
    }

    .content {
        padding-bottom:50px;
        /*height:2000px; 做超过一屏时使用*/
    }

    .footer {
        position:absolute;
        bottom:0;
        left:0;
        width:100%;     /*绝对定位使后宽度100%*/
        min-height:50px; 
        background-color:#28323C;
    }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="header">header</div>
        <div class="content"></div>
        <div class="footer">footer</div>
    </div>
</body>
</html>


2，说明

原始参考资料中的footer设置的是height:50px，这里更改为了min-height:50px，避免了有可能的footer内部子内容高度大于footer高度而出现的bug。 本博客的footer就是使用这一方法实现的，有兴趣的可直接查看源码。


参考资料：

1，舞动青春-不足一屏时，页面底部位于浏览器底部（用CSS解决）