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的原因保留着。这样就达到了视觉上的高度自适应效果。

 

html div三列布局占满全屏(左右两列定宽或者百分比、中间自动适应,div在父div中居底)

参考文章:http://hi.baidu.com/alimyself/item/3aa6763d787cc7697c034b9d 参考文章:http://www.cnblogs.com/webmoon...
  • duyelang
  • duyelang
  • 2014年03月05日 17:48
  • 9728

css实现三列浮动流式布局

欢迎使用Markdown编辑器写博客一、html内容我们将整个屏幕分为左右两大部分,再将左部分分为两列以实现三列的布局。使用基于浮动的方式进行布局,具体代码如下: Demo1 ...
  • Jutal_ljt
  • Jutal_ljt
  • 2017年05月09日 10:55
  • 548

完美的DIV三行三列自适应高度布局

我们一般讨论的自适应高度的DIV布局,都是指有背景区分的,但在我们的实际应用中,很少有网站这么用的,大多数都不是用背景区分的。但今天我们并 不是讨论它的实用性如何,而只讨论实现这种布局的一种较完美的解...
  • season777
  • season777
  • 2014年07月16日 17:49
  • 122

CSS三列自适应布局

转自:http://www.cnblogs.com/xiaohuochai/p/5455905.html 前面的话   前面已经介绍过单列定宽单列自适应和两列自适应的两列布局。本文介绍三列...
  • cometwo
  • cometwo
  • 2016年05月07日 16:43
  • 1674

HTML,使用div+css实现自适应table布局

简单的table布局:     1:使用 box-sizing以便于使用100%;     2:每个cell使用float:left,在行末尾使用 clear:both 以使整个行有高度和宽度 ...
  • okkk
  • okkk
  • 2016年07月30日 18:16
  • 4715

上下Div固定,中间div高度自适应(随浏览器高度变化而变化)

1.css代码: html,body{ margin:0; padding:0; height:100%; overflow:hidden; } #top{ position:absol...
  • muyeju
  • muyeju
  • 2015年10月03日 15:56
  • 5073

html css div自适应屏幕宽度,高度

做C/S项目其实最让人蛋疼的无非就是兼容问题,各种浏览器的不兼容外还有div+css不科学的显示问题。所以针对div+css窗口最大化、缩小的自适应加以解决。   New ...
  • xiezhiyong3621
  • xiezhiyong3621
  • 2013年04月24日 17:38
  • 54300

三种有效解决DIV高度自适应的方法

本文和大家重点讨论一下DIV高度自适应的三种有效解决方法,它们分别是一是JS法、二是背景图填充法、三是“补丁大法”(比较变态)。 DIV高度自适应的三种有效解决方法 DIV+CSS设计俨然已成网页...
  • aaawyh
  • aaawyh
  • 2016年10月20日 14:05
  • 749

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

摘要:最近在做移动端页面布局,偶有心得,记录于此。
  • mika85489
  • mika85489
  • 2016年08月17日 21:13
  • 1696

这可能是史上最全的CSS自适应布局总结

标题严格遵守了新广告法,你再不爽,我也没犯法呀!屁话不多说,直入! 所谓布局,其实包含两个含义:尺寸与定位。也就是说,所有与尺寸和定位相关的属性,都可以用来布局。 大体上,布局中会用到的有:尺寸相...
  • three_bird
  • three_bird
  • 2016年05月21日 08:56
  • 25289
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DIV布局之三行三列之高度自适应
举报原因:
原因补充:

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