上下固定[不滚动]中间自适应高度布局
Code<!-- 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:2em; 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 -->
<div id="footer">
<h2>我也固定的[不随滚动条滚动而滚动]</h2>
</div>
</body>
</html>
浙公网安备 33010602011771号