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

最新推荐文章于 2025-04-16 10:42:21 发布

cui55

最新推荐文章于 2025-04-16 10:42:21 发布

阅读量1.2k

点赞数

分类专栏： DHTML Javascript CSS 文章标签： xhtml scroll encoding html header

DHTML Javascript CSS 专栏收录该内容

57 篇文章

订阅专栏

上中下三栏自适应100％高度，这是一个比较特色并且非常适用的页面布局代码，对于一些展示图片或者代码的页面非常适用。

<?xml version="1.0" encoding="gb2312"?>

<!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:0!important;

 padding:100px 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 leftmargin="0" topmargin="0" scroll="no">

<div id="header">页首</div>

<div id="middle">

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

页中<br />

</div>

<div id="footer">页脚</div>

</body>

</html>