div+css实现框架布局_div+css实现内联框架-优快云博客

本文介绍一种利用CSS实现固定头部和底部布局的方法，中间部分可根据内容自适应高度并出现滚动条。适用于网页设计中需要固定导航栏和页脚的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

头部和底部的高度固定，并且位置需始终保持不变，中间部分的可视高度为除去头和尾的剩余部分，实际高度则随内容的多少自适应，如果实际高度超出了超出可视高度则出现滚动条

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部分：

<!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 />End</div>
<div id="dyfoot">Footer</div>
</body>
</html>

其实在不考虑ie6及更早的浏览器的情况下，以上CSS中的Hack是可以去掉的，而且也不需要进入怪异模式（Quirks Mode）就可以实现。