DIV布局之头尾固定中间自适应
这篇文章在我的机器里呆了很长时间了，一直犹豫着到底发还是不发呢。
其原因是这个Demo还有一些不完善的地方，所以一直没发，但又一直想要完善它，所以今天还是打算将它发出来，因为人民的智慧是无穷的。
该布局的重点在于头部和底部的高度固定，并且位置需始终保持不变，中间部分的可视高度为除去头和尾的剩余部分，实际高度则随内容的多少自适应，如果实际高度超出了超出可视高度则出现滚动条（当然，如果是通过JS的话，可以轻而易举的实现，但如果是纯粹的CSS的话...其实也很容易实现，只不过为了能在IE中向下兼容才颇费了一番功夫）。
这听起来似乎有点象框架了，其实就是在模拟那种效果：）
[效果演示：http://www.doyoe.com/model/xhtmlcss/layout/7.htm]
下图就是该Demo的效果：
单看这张图，是不是感觉实现起来应该不复杂呢？是的，确实不复杂，在ie6以上及非IE浏览器中都很好实现。
闲话不多说，先看实现代码：
CSS部分：
html,body {
margin:0;
font:14px/200% tahoma, "宋体", Simsun, Arial, Helvetica;
height:100%;
overflow:hidden;
}
#dyhead,#dyfoot {
background:#eee;
width:100%;
height:30px;
position:absolute;
z-index:100;
}
#dyhead {
top:0;
}
#dyfoot {
bottom:0;
}
#dycontent {
width:100%;
background:#f7f7f7;
overflow:auto;
top:30px;
bottom:30px;
position:absolute;
z-index:99;
_height:100%;
_border-top:30px solid #eee;
_border-bottom:30px solid #eee;
_top:0;
}
XHTML部分：
<!--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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>DY CSS Layout</title>
<meta name="Author" content="Doyoe(飘零雾雨), edzmaster@gmail.com" />
</head>
<body>
<div id="dyhead">Header</div>
<div id="dycontent">Begin<br />中间大段的内容<br />中间大段的内容<br />中间大段的内容<br />中间大段的内容<br />中间大段的内容<br />中间大段的内容<br />中间大段的内容<br />中间大段的内容<br />中间大段的内容<br />中间大段的内容<br />中间大段的内容<br />中间大段的内容<br />中间大段的内容<br />中间大段的内容<br />中间大段的内容<br />中间大段的内容<br />中间大段的内容<br />中间大段的内容<br />中间大段的内容<br />中间大段的内容<br />中间大段的内容<br />End</div>
<div id="dyfoot">Footer</div>
</body>
</html>
代码看完了，是不是蛮简单又蛮复杂的：）
其实在不考虑ie6及更早的浏览器的情况下，以上CSS中的Hack是可以去掉的，而且也不需要进入怪异模式（Quirks Mode）就可以实现。
当然，我也希望大家可以提出在考虑ie6及更早浏览器的情况下也可以不需要进入怪异模式就能实现的的方法，所以今天还是发出来大家共同讨论一下。
