[散分]DIV布局之三行三列之高度自适应解决方案
日期：2014-05-17 浏览次数：20608 次
[散分]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>
写了几篇宽度自适应的布局后，发现很多朋友都对高度自适应十分感兴趣，于是整理了一篇贴了大家参考一下：
一般来说一个有好几列的布局，每列的内容都是不固定的，或多或少。所以在做布局的时候一般不会给出每列的定高，但这样做却出现了列与列之间的高度不一致，导致陷入灵活有余而精致欠缺的尴尬。
所以设计师们急切的希望能找个一到简单而有效的解决高度自适应的方法，这里只列举一种通过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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
