[散分]DIV布局之三行三列之高度自适应解决方案

2012-04-05

[散分]DIV布局之三行三列之高度自适应写了几篇宽度自适应的布局后，发现很多朋友都对高度自适应十分感兴趣，

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

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

所以设计师们急切的希望能找个一到简单而有效的解决高度自适应的方法，这里只列举一种通过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的原因保留着。这样就达到了视觉上的高度自适应效果。

[解决办法]
沙发先，再来看！
[解决办法]
学习，收藏
[解决办法]
http://www.w3cn.org/article/layout/index.html

[解决办法]
.
.
.
.
.
.
..
.
.
.
.
蹭点分儿,脸红地说....
[解决办法]
哈。。飘过先。。嘿。
[解决办法]
期待着多给分的飘过……
[解决办法]
路过……
[解决办法]
接分...穷不是理由..吃饭是理由
[解决办法]
不错，我以前一直在#dybody中用背景图片的方法实现。
[解决办法]
貌似懂了。。。。。
[解决办法]
好东西，我的网站就要这个东西。
www.linjimu.com.com
谢谢了，收藏！
[解决办法]
支持动态列的纯.net写的web报表开发工具在: http://www.fcsoft.com.cn/webreport.htm
[解决办法]
好，收藏之
[解决办法]
在要自适应高度的DIV外在套一个DIV应该出可以吧
[解决办法]
还不错.勉强能看懂.
[解决办法]
http://www.qynly.com

上面的论坛部分上面为什么在IE 6 和IE7上面的高度不一样
[解决办法]
这个最近刚刚开始学，Mark、
[解决办法]
蹭分
[解决办法]
mark 学习!
[解决办法]
JF啊````````
[解决办法]
不错
[解决办法]
学习..
感谢楼主分享
[解决办法]
好好学习学习！
[解决办法]
收藏学习下！！
[解决办法]
好，谢谢楼主，有空再分析一下有无用先
[解决办法]
jf
[解决办法]
学习收藏!
[解决办法]
什么东西,太高深了

[解决办法]
接分

[解决办法]
不错,帮顶。
[解决办法]
收藏
[解决办法]
楼主你好，我做了一个三行列自适应高度的网页（和你的差不多），可是我老板要第二列和第三列还有页脚用同样的背景色，我必须将第二列和第三列分开（两列之间有个缝隙，我的背景是黄色的，缝隙把黄色的背景显出来），还有页头，页脚和中间三列之间也要有个缝隙分开。我在页头下面和页脚上面加了这样的代码：border-bottom: medium solid #F9A406;
border-top: medium solid #F9A406;这样我就将页头和页脚与中间的三列分开了。我试了很多次，就是没办法将中间三列分开，有个间隙。下面是我的代码，请楼主帮我看看，怎样才能将中间三列分开，三列彼此有个间隙，多谢了！！！
CSS 部分：

<style type= "text/css ">

</style>

xhtml 代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd ">

<html xmlns= "http://www.w3.org/1999/xhtml " xml:lang= "en ">

<head>
<meta http-equiv= "content-type " content= "text/html;charset=utf-8 " />
<title> DHTML & CSS Advanced | Creating Contextual Layouts </title>

<link href= "style_02.css " rel= "stylesheet " type= "text/css " media= "all "/>
</head>
<body>
<div id= "layoutLogic-ABC ">
<div id= "header ">
<h1> Header </h1>
</div>
<div class= "page ">
<div class= "section ">
<div class= "col-A ">
<h2> Column A </h2>
<p> Alice looked round her in great surprise. `Why, I do believe we 've been under this tree the whole time! Everything 's just as it was! ' </p>

</div>
<div class= "col-B ">
<h2> Column B </h2>
<p> `Now! Now! ' cried the Queen. `Faster! Faster! ' And they went so fast that at last they seemed to skim through the air, hardly touching the ground with their feet, till suddenly, just as Alice was getting quite exhausted, they stopped, and she found herself sitting on the ground, breathless and giddy. </p>

<p> The Queen propped her up against a tree, and said kindly, `You may rest a little now. ' </p>
<p> Alice looked round her in great surprise. `Why, I do believe we 've been under this tree the whole time! Everything 's just as it was! ' </p>
<p/>

</div>
<div class= "col-C ">
<h2> Column C </h2>
<p> `Of course it is, ' said the Queen, `what would you have it? ' </p>
</div>
<div class= "clear "> </div>
</div>
</div>
<div id= "footer ">
<div class= "innerMargin ">
<h1> Footer </h1>
</div>
</div>
</div>
</body>

</html>

[解决办法]
呵呵，多谢
[解决办法]
不错,帮顶。
[解决办法]
mark
[解决办法]
mark

[解决办法]
帮着顶顶贴！

---------
个人签名：
------------------------------------
孙悟空分类信息网-分类信息全掌握！
www.sun5kong.cn
www.sun5kng.com.cn
------------------------------------
集成100多种搜索引擎，抛弃搜索烦恼
http://www.allss.com.cn
------------------------------------
免费空间虚拟主机ASP.NET2.0+SQL 2000
http://www.myidc.info
------------------------------------
http://www.myidc.info
QQ：43909413
------------------------------------
[解决办法]
bu cuo
[解决办法]
收藏，学习，接分
[解决办法]
mark
[解决办法]
不错，顶顶
[解决办法]
收藏了。。。。
谢谢分享。。。

热点排行