关于上中下三栏自适应100％高度

木鱼精

UID: 16208
帖子: 81
积分: 251
在线时间: 56小时
注册时间: 2007-05-08
最后登录: 2010-02-08

1^# 木鱼精发表于2007-07-14

关于上中下三栏自适应100％高度

提示：您可以先修改部分代码再运行

<!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=gb2312" /> 
<style type="text/css"> 
*{ 
        margin:0; 
        padding:0; 
} 
html{ 
        padding:0 !important; 
        padding:100px 0; 
        width:100%; 
        height:100%; 
        overflow:hidden; 
} 
body{ 
        padding:100px 0; 
        padding:/**/0; 
        height:100%; 
        overflow: hidden; 
} 
#header{ 
        position:absolute; 
        top:0; 
        width:100%; 
        height:100px; 
        background:#ccc; 
        line-height:100px; 
        text-align:center; 
} 
#middle{ 
        position: absolute!important; 
        position: relative; 
        top:100px!important; 
        top:0; 
        bottom:100px; 
        width:100%; 
        height:auto!important; 
        height:100%; 
        background:#ffc; 
        text-align:center; 
        overflow: auto; 
} 
#footer{ 
        position:absolute; 
        bottom:0; 
        width:100%; 
        height:100px; 
        background:#ccc; 
        line-height:100px; 
        text-align:center; 
} 
</style> 
<title>自适应100％高度</title> 
</head> 
<body> 
<div id="header">页首</div> 
<div id="middle"> 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
页中 
</div> 
<div id="footer">页脚</div> 
</body> 
</html>

提示：您可以先修改部分代码再运行

prince，那么多年来，一直爱你。希望今后的日子，我们开心，如意。