div布局之上中下，中高度自动撑满

来源：互联网发布：指标源码编辑：程序博客网时间：2024/06/13 10:45

上次去面试，别人问我关于div布局的问题。div布局之上中下，中高度自动撑满。以前只知道在不声明<!DOCTYPE头的情况下，用table可以，然后就是可以通过计算。回去后苦苦研究了好几天。今天终于研究出来了，贴出来留个纪念。此页兼容IE6,IE7,IE8,FF,Chrome,opera。

<html>

<head>

<title>div布局</title>

/*初始化*/

body {font-family:/5B8B/4F53,Arial Narrow,arial,serif;font-size:12px;}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}

table,td,tr,th{font-size:12px;}

li{list-style-type:none;}

table{ margin:0 auto;}

img{vertical-align:top;border:0;}

ol,ul {list-style:none;}

caption,th {text-align:left;}

h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}

q:before,q:after {content:'';}

abbr,acronym {border:0;}

address,caption,cite,code,dfn,em,th,var {font-weight:normal; font-style:normal;}

/*公共常用*/

a {color:#2b2b2b;text-decoration:none;}

a:visited {color:#2b2b2b;text-decoration:none;}

a:hover {color:#ba2636;text-decoration:underline;}

a:active {color:#ba2636;}

.left{float: left;}

.right{float: right;}

.inline li{display: inline;}

/*各模块具体*/

#divBody{width: 100%;height: 100%;position: relative;}

#header{height: 52px; background-color: #77a7cc; width: 100%; height: 52px; position: absolute; top: 0; left: 0; z-index: 99;}

#header .menu{padding-right: 10px;}

#navigator{height: 30px;width: 100%; height: 30px; position: absolute; top: 52px; left: 0; z-index: 99;}

#main{overflow: auto; width: 100%; height: 100%; padding-top: 82px; padding-bottom: 100px; background-color: #FFFFCC; z-index: 96;-moz-box-sizing: border-box; -webkit-box-sizing: border-box;}

#main .content{overflow: auto; width: 100%; height: 100%; background-color: #F7E8FF; z-index: 96; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}

#main div{background-color: #669999}

#footer{width: 100%; position: absolute; bottom: 0; left: 0; height: 100px; z-index: 93; background-color: #CCFFFF;}

</style>

</head>

<body>

<ul>

<li><a href="#">个人信息修改</a></li>

</ul>

</div>

<ul>

</ul>

</div>

</div>

</div>

</body>

</html>