带自适应底部的页面模板

最新推荐文章于 2023-04-06 21:24:37 发布

原创最新推荐文章于 2023-04-06 21:24:37 发布 · 949 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml #html #div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>foot</title>
<style>
*{
   margin:0;
   padding:0;
}
html, body{
   height:100%;
}
body{
   text-align:center;
}
#homepage{
   width:800px;
   background-color:#ddd;
   position:relative;
   min-height:100%;
   height:auto !important;
   height:100%;
   margin:0 auto;
   text-align:left;
}
#content{
   padding-bottom:40px;
}
#head{
   background-color:#999;
   padding:1em;
}
#footer{
   position:absolute;
   height:40px;
   bottom:0px !important;
   bottom:-1;
   background-color:#ccc;
   width:100%;
}

</style>
</head>

<body>
<div id="homepage">
   <div id="head">Head</div>
   <div id="content"></div>
   <div id="footer">Foot</div>
</div>
</body>
</html>