DIV上中下布局高度自适应的研究

最新推荐文章于 2022-12-13 14:22:31 发布

xiaoqiS

最新推荐文章于 2022-12-13 14:22:31 发布

阅读量417

点赞数

CC 4.0 BY-SA版权

文章标签： html css

本文链接：https://blog.youkuaiyun.com/xiaoqiS/article/details/84322769

本文探讨如何使用纯DIV+CSS实现上中下布局的高度自适应，包括顶部和底部固定高度，中间部分随屏幕高度变化而变化。适用于不同版本浏览器，并提供IE6及IE7/IE8的解决方案。

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

DIV上中下布局高度自适应的研究
一、背景
在采用基于DIV+CSS的布局开发时，经常需要考虑各种浏览器版本的兼容性问题。
常用的布局模式主要包括：左中右、上中下，以及两种模式的结合。
在早期的开发，一般都采用Table标记的方式实现。
当尝试采用基于DIV的模式，发现一切都变的似乎没那么简单了。特别是浏览器的兼容性问题，更加突出了。
二、需求
本文只讨论上中下布局模式的实现，关于左中右模式的实现，相比较来说要简单得多了。如果时间充，我会另文详述。
1.上部（top）Div高度固定100px，宽度100%；
2.下部（footer）Div高度固定100px，宽度100%；
3.中部（middle）DIV高度根据屏幕高度，自适应充满，宽度100%；
4.用纯DIV+CSS实现，不采用脚本计算高度的方式；
5.调整浏览器大小时，中部DIV能随着屏幕高度自适应。
三、HTML部分
本部分非常简单，只是定义了三个DIV，分别对应：top、middle、footer
<div id="header">
抬头</div>
<div id="middle">
1页中<br />
2页中<br />
3页中<br />
4页中<br />
5页中<br />
6页中<br />
7页中<br />
8页中<br />
9页中<br />
</div>
<div id="footer">
页脚
</div>
四、CSS实现
为了便于理解实现原理，分两部分说明：
1.IE6下的实现
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
padding:100px 0;
width:100%;
height:100%;
overflow:hidden;
}
#header{
position:absolute;
top:0;
width:100%;
height:100px;
background:#ccc;
line-height:100px;
text-align:center;
}
#middle{
position: relative;
top:-100px;
height:100%;

bottom:100px;
width:100%;
background:#ffc;
text-align:center;
overflow: auto;
}
#footer{
position:absolute;
bottom:0;
width:100%;
height:100px;
background:#ccc;
line-height:100px;
text-align:center;
}
</style>
2.IE7、IE8下的实现
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
overflow:hidden;
}
#header{
position:absolute;
top:0;
width:100%;
height:100px;
background:#ccc;
}
#middle{
position: absolute;
top:100px;
height:auto;
bottom:100px;
width:100%;
background:#ffc;
text-align:center;
overflow: auto;
}
#footer{
position:absolute;
bottom:0;
width:100%;
height:100px;
background:#ccc;
line-height:100px;
text-align:center;
}
</style>
五、全部CSS代码
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{

padding:0 !important;

padding:100px 0;

width:100%;
height:100%;
overflow:hidden;
}
#header{
position:absolute;
top:0;
width:100%;
height:100px;
background:#ccc;
line-height:100px;
text-align:center;
}
#middle{

position: absolute!important;
top:100px!important;
height:auto!important;

position: relative;
top:-100px;
height:100%;

bottom:100px;
width:100%;
background:#ffc;
text-align:center;
overflow: auto;
}
#footer{
position:absolute;
bottom:0;
width:100%;
height:100px;
background:#ccc;
line-height:100px;
text-align:center;
}
</style>