您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 純CSS 貼底部的布局

純CSS 貼底部的布局

文章來源：365jz.com 點(diǎn)擊數(shù)：203 更新時(shí)間：2009-09-18 10:20 參與評論

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<style type="text/css">
html{height:100%;overflow:auto;}
body{margin:0;padding:0;position:relative;height:auto !important;height:100%;min-height:100%;text-align:center;}
.main{border-bottom:60px solid #fff;}
#footer{position:absolute;width:100%;clear:both;height:25px;border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin-top:20px;bottom:0;left:0;}
</style>
</head>
<body>
<div class="all">
<div id="topbar">菜單部分</div>
<div class="main">
我是主體，我是核心<br /><br /><br /><br />
雖然我是主體，但是你可以刪除我其中的內(nèi)容再看看我下面的頁腳
</div>
<div id="footer">
我是安分守己的頁腳，我只安靜的待在頁面的最下方
</div>
</div>
</body>
</html>