上下固定[不滚动]中间自适应高度布局

Sep 24

上下固定[不滚动]中间自适应高度布局

一直想要这样一个布局,但总有问题.主要是兼容性的问题.昨天在CSSPLAY中看到一篇文章.终于搞定.这个能兼容IE5+,FF,OPEAR,其他的没作测试.

<!– Put IE into quirks mode –>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>上下固定[不滚动]中间自适应高度布局</title>
<meta name="Author" content="Stu Nicholls" />
<style type="text/css">

body {
margin:0;
border:0;
padding:0;
height:100%;
max-height:100%;
background:#fff;
font-family:arial, verdana, sans-serif;
font-size:1.2em;
overflow: hidden;
}

* html body {
padding:120px 0 50px 0;
}

#container {
position:fixed;
top:120px;
left:0;
bottom:50px;
right:0;
overflow:auto;
background:#fff;
padding:20px;
text-align:center;
}

* html #container {
height:100%;
width:100%;
}

#header {
position:absolute;
top:0;
left:0;
width:100%;
height:116px;
overflow:auto;
background:#53829d;
border-bottom:4px solid #73a2bd;
}
* html #header {height:120px;}

#footer {
position:absolute;
bottom:0;
left:0;
width:100%;
height:45px;
overflow:auto;
text-align:right;
background:#73a2bd;
border-top:5px solid #53829d;
}
* html #footer {height:50px;}

h1 {font-size:4em; margin:0; padding:0;text-align: center;}
h2{ margin: 0; padding: 0; text-align: center;}

</style>
</head>

<body>
<div id="header">
<h1>我不随滚动条滚动而滚动</h1>
</div>

<div id="container">
<h1>我是自适应高度的</h1>
<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 />
<h1>我是自适应高度的</h1>
</div> <!– end of container –>