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

原创 2007年09月29日 09:37:00

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

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

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

 

相关文章推荐

如何利用CSS+DIV 实现三列自适应高和宽的布局(不用javascript)

需求:请用div+css自适应浏览器宽度和高度的水平三列布局,左右两列宽度均为为100px,html结构如下(可以适当修改结构): class="left"> ...

网页中三列自适应高度布局的实现

三列的布局,一个固定宽度的左列是导航列,右列可以放Google Ads 或者 Flickr的像册,自适应宽度的中间列是主要内容。   特点: 有一个自适应宽度的中间列与固定的宽度左右列。中...

【CSS】三列布局(左右div固定宽度,中间div随浏览器窗口自适应变化宽度)

以前在网上看到过,说这个问题是一道经典的笔试/面试题。当时在百度面试的时候果然就遇到过。昨天在兰亭的时候果然又遇到了。其实,这个题目确实考到了Css几个方面的很重要的基础知识。首先考到了定位中的方法中...

css+div三列宽度自适应

http://blog.163.com/ronghao1987@126/blog/static/96613068201001935844800/ 源码: 3列布局 bod...

左右定宽,中间自适应,实现三列布局

左右定宽,中间自适应,实现三列布局

CSS-两侧固定宽度,中间自适应的三列布局

在实际开发中,左右两侧固定宽度,中间自适应的三列布局是经常能够遇到的,尤其是最近的一个项目中,属于微信公众号,移动端的网页。在部分页面中,就需要用到这种布局,我是采用flex布局来搞定的。为了总结一下...

html 三列布局(两列固定宽度,一列自适应)

摘要:最近在做移动端页面布局,偶有心得,记录于此。

【前端攻城狮之路】CSS三列布局——两侧固定宽度、中间自适应

先附上效果图: 实现思路: 1、创建一个 div 容器(content)来存放这三个色块 2、设置容器 position:relative,两侧div position:abso...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DIV布局之三行三列之高度自适应
举报原因:
原因补充:

(最多只允许输入30个字)