cssモジュールは常にブラウザの下部にある効果

4738 ワード

タイトルの説明:内容が1画面未満の場合、下部の内容は常にディスプレイの下部に位置します.コンテンツが1画面を超えると、コンテンツの下部に表示されます.
サンプルコード:
 
<!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を単独で出す必要があることです.