DIV布局之三行三列之高度自适应_CSS_网页制作_技术部落--打造最全面的IT技术网站

DIV布局之三行三列之高度自适应

2007-5-17 来源：网络资源编辑：Jsbulo 热度：

一般来说一个有好几列的布局，每列的内容都是不固定的，或多或少。所以在做布局的时候一般不会给出每列的定高，但这样做却出现了列与列之间的高度不一致，导致陷入灵活有余而精致欠缺的尴尬。

所以设计师们急切的希望能找个一到简单而有效的解决高度自适应的方法，这里只列举一种通过padding及margin解决的方案，希望能给大家一个参考。而通过JavaScript方式实现的，相信大家都会，这里不举例子。

［演示地址：http://www.doyoe.com/model/xhtmlcss/layout/4.htm］

CSS部分：

body {
margin: 0;
font-size: 12px;
font-family: Verdana, Arial;
text-align: center;
}
div {
overflow: hidden;
}
h1,h3,p {
margin: 0;
}
#dybody {
width: 777px;
margin: 0 auto;
text-align: left;
}
#dyhead,#dyfoot {
background-color: #bbb;
}
#dymid {
width: 777px;
float: left;
}
.dycenter {
width: 497px;
background-color: #eee;
}
.dyleft,.dyright {
width: 140px;
background-color: #E7DFD3;
}
.dyleft,.dycenter,.dyright {
padding-bottom: 32767px; /*使得各列都向下撑开32767像素*/
margin-bottom: -32767px; /*使得div的overflow发挥作用*/
float: left;
}
#dyfoot {
clear: both;
}

XHTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>DY CSS Layout 三行三列之高度自适应</title>
</head>
<body>
<div id="dybody">
<div id="dyhead">
<h1>Head</h1>
</div>
<div id="dymid">
<div class="dyleft">
<h3>Left</h3>
<p>leftpart<br />leftpart</p>
</div>
<div class="dycenter">
<h3>Center</h3>
<p>centerpart<br />centerpart<br />centerpart<br />centerpart</p>
</div>
<div class="dyright">
<h3>Right</h3>
<p>rightpart</p>
</div>
</div>
<div id="dyfoot">
<h1>Footer</h1>
</div>
</div>
</body>
</html>

这里只有一个地方需要说明一下那就是.dyleft,.dycenter,.dyright三列都用了padding-bottom和margin-bottom。这里首先将padding-bottom设置为足够长，作用是将三列向下撑开足够长（一般的页面都不会这么长）；而margin-bottom设置为负数则是为了互补刚才的padding-bottom设置，由于所有的div都被设置了overflow:hidden，所以left，center，right三列被padding撑开且无内容的部分则会被hidden，而颜色则因为padding的原因保留着。这样就达到了视觉上的高度自适应效果。

技术部落，更多精彩内容尽在首页

【部落直达】【部落社区】【关闭】