<!
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
>
Height100%
</
title
>
<
style
type
="text/css"
>
*
{
padding
:
0px 0px
;
margin
:
0px 0px
;
}
body
{
background
:
url(body_bg.GIF) repeat
;
background-color
:
#CCCCCC
;
text-align
:
center
;
font-family
:
Verdana
;
font-size
:
12px
;
}
#container
{
background-color
:
#FFFFFF
;
width
:
1000px
;
margin
:
0px auto
;
}
#head
{
background-color
:
#00CC00
;
}
#head #headinner
{
height
:
80px
;
padding
:
10px 10px
;
}
#main
{
background-color
:
#ffffff
;
}
#main #maininner
{
padding
:
10px 10px
;
}
#main #maininner #content
{
border
:
1px solid #CCCCCC
;
height
:
200px
;
padding
:
10px 10px
;
}
#foot
{
background-color
:
#FF9900
;
}
#foot #footinner
{
padding
:
10px 10px
;
}
</
style
>
</
head
>
<
body
>
<
div
id
="container"
>
<
div
id
="head"
>
<
div
id
="headinner"
>
head
</
div
>
</
div
>
<
div
id
="main"
>
<
div
id
="maininner"
>
<
div
id
="content"
>
main
</
div
>
</
div
>
</
div
>
<
div
id
="foot"
>
<
div
id
="footinner"
>
foot
</
div
>
</
div
>
</
div
>
<
script
type
="text/javascript"
>
//
??CenFun.com
function
autoHeight(){
var
h_window
=
self.innerHeight
||
document.documentElement.clientHeight
||
document.body.clientHeight;
var
h_head
=
document.getElementById(
"
head
"
).scrollHeight;
var
h_foot
=
document.getElementById(
"
foot
"
).scrollHeight;
var
h_main
=
document.getElementById(
"
maininner
"
).scrollHeight;
if
(h_window
-
h_head
-
h_foot
>
h_main){ document.getElementById(
"
main
"
).style.height
=
(h_window
-
h_head
-
h_foot)
+
"
px
"
;}
else
{ document.getElementById(
"
main
"
).style.height
=
h_main
+
"
px
"
;}}autoHeight();
//
??CenFun.com
window.onresize
=
autoHeight;
</
script
>
</
body
>
</
html
>
转载于:https://www.cnblogs.com/windthunder/archive/2011/04/18/2019613.html
相关资源：html高度自适应三种经典布局
