css模块始终位于浏览器底部效果

题目描述：当内容不满一屏时，底部内容始终位于显示屏的底部；当内容超过一屏时，则位于内容底部。

示例代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>footer始终居于底部</title>
<style type="text/css">
* { margin:0; padding:0; }
body { font:12px/1.5 arial; }
html, body, .wrap { height:100%; }
.wrap { height:auto; min-height:100%; _height:100%; background:#CCC; color:#fff; font-size:16px; text-align:center; }
.main { padding-bottom:80px; }
.footer { position:relative; height:80px; margin-top:-80px; background:#333; color:#fff; font-size:16px; text-align:center; }
</style>
</head>

<body>
<div class="wrap">
    <div class="main">
        <h1>内容部分</h1>
        <h1>内容部分</h1>
        <h1>内容部分</h1>
        <h1>内容部分</h1>
        <h1>内容部分</h1>
        <h1>内容部分</h1>
        <br />
        <h2>测试测试</h2>
        <h2>测试测试</h2>
        <h2>测试测试</h2>
        <h2>测试测试</h2>
        <h2>测试测试</h2>
        <h2>测试测试</h2>
        <br />   
    </div>
</div>
<div class="footer">
    <h1>底部</h1>
</div>
</body>
</html>

必须注意的是，需要把footer单独拿出来。