您的位置：首页 > 其它

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

2007-08-10 11:18 555 查看

转自：http://blog.doyoe.com/article.asp?id=18

写了几篇宽度自适应的布局后，发现很多朋友都对高度自适应十分感兴趣，于是整理了一篇贴了大家参考一下：

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

所以设计师们急切的希望能找个一到简单而有效的解决高度自适应的方法，这里只列举一种通过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;
text-align: left;
}
h1,h3,p {
margin: 0;
}
#dyhead,#dyfoot {
width: 777px;
margin: auto;
background-color: #bbb;
}
#dymid {
width: 777px;
margin: auto;
background-color: #D2C6D2;
}
.dycenter {
width: 477px;
margin: 0 10px;
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 name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>DY CSS Layout 三行三列之高度自适应(noscript && 普通模式)</title>
</head>
<body>
<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>
</body>
</html>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航