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

最新推荐文章于 2024-05-03 14:55:36 发布
最新推荐文章于 2024-05-03 14:55:36 发布
阅读量2.6k 收藏 5
点赞数
文章标签： div布局 w3c html

我们一般讨论的自适应高度的DIV布局，都是指有背景区分的，但在我们的实际应用中，很少有网站这么用的，大多数都不是用背景区分的。但今天我们并 不是讨论它的实用性如何，而只讨论实现这种布局的一种较完美的解决方法。

顾名思义，所谓的自适应高度，就是某一列撑长而其它列的高度也跟随相应地被撑长，这个效果如果用table的话，轻而易举就完成了，而用DIV就没 这么容易了。之前也有试过不少的方法，比如用JS控制、padding-bottom 给个很大的负值……但都觉得不太理想。后来在一个国外的网站上看到一个，感觉这是目前为止比较满意的解决方法了，不用hack、不用JS、兼容性强……

原理很容易，理解之后应该可以解决很多这样的布局方案了。见上图，.colmask、.colmin、.colleft，分别为三列背景的容器，最 外层的 .colmask 设定 overflow:hidden;，通过相对定位分成三列。而内容容器 .col1、 .col2、 .col3 都放在最内层的 .colleft 里面，通过相对定位定好位置，所以不管 .col1、 .col2、 .col3 哪一个伸长或缩短，外部的 .colmask、.colmin、.colleft 都会跟着伸长与缩短，也就实现了我们所要的效果了。

看看演示效果：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>完美的DIV三行三列自适应高度布局</title>
<style type="text/css">
body {
margin:0;
padding:0;
font-size:12px;
}
.header {
width:100%;
height:50px;
background:#EEE;
border-bottom:1px solid #000;
}
.colmask {
position:relative;
clear:both;
width:100%;
overflow:hidden;
}
.colright, .colmid, .colleft {
float:left;
width:100%;
position:relative;
}
.col1, .col2, .col3 {
float:left;
position:relative;
overflow:hidden;
}
.threecol {
background:#BBB;
}
.threecol .colmid {
right:20%;
background:#CCC;
}
.threecol .colleft {
right:60%;
background:#DDD;
}
.threecol .col1 {
width:58%;
left:101%;
}
.threecol .col2 {
width:18%;
left:23%;
}
.threecol .col3 {
width:18%;
left:85%;
}
.footer {
clear:both;
width:100%;
height:50px;
background:#EEE;
border-top:1px solid #000;
}
</style>
</head>
<body>
<div class="header"> 这里是头部 </div>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
</div>
<div class="col2"> 这里是左栏 </div>
<div class="col3">
<p>这里是右栏</p>
<p>这里是右栏</p>
<p>这里是右栏</p>
<p>这里是右栏</p>
</div>
</div>
</div>
</div>
<div class="footer"> 这里是底部 </div>
</body>
</html>
季节变幻S
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
div+css布局三行三列中间自适应
01-28
div+css布局 三行三列 中间自适应
css实现多列高度不同的div等高
开心大表哥
04-30 8253
利用padding-bottom|margin-bottom正负值相抵；设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任 一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。 &lt;!DOCTYPE HTML&...
用CSS实现三列DIV等高布局
愚睿^_^的专栏
09-02 1273
在实际的页面布局的时候
脚本控制三行三列自适应高度DIV布局
10-31
脚本控制三行三列自适应高度DIV布局
Div+CSS构建三行三列框架
qq_19286785的博客
09-21 4000
要构建的框架如图所示： 方法一：使用div的浮动窗口属性 显然，页面布局到下是三层结构，中间的div包含三个小div；因为div是块元素，占用文档流的一行空间，要使一行中出现多个div，需要为div设置浮动样式。代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #header{ background-color
使用grid布局解决flex布局最后一行不足的问题
qcc0716的博客
08-13 2657
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
一个CSS上中下三行三列结构的Div布局
web开发自学
06-01 3097
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"; lang="gb2312"&gt
div+css 构建3行3列的表格，在FF和IE，以及苹果的浏览器下均可以正常的显示，放大，缩小
我的地盘
04-27 1248
                                         html>head>  style>#table  { 
脚本控制三行三列自适应高度DIV布局的代码
10-30
用脚本控制div高度，慢慢缓冲效果不错
脚本控制DIV三行三列布局自适应高度.rar
07-04
脚本控制DIV三行三列布局自适应高度
CSS+DIV布局(满屏自适应三行布局,兼容FF,div垂直居中)
07-13
CSS+DIV写的，上下固定高度，中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ------------------------- 附送一个 DIV垂直居中的页面~~~
CSS网站布局实录 （第二版）PDF版
12-10
3.8 三列浮动中间列宽度自适应 3.9 高度自适应 3.10 盒模型详解(.Box Model) 3.10.1 什么是盒模型 3.10.2 盒模型的细节 3.10.3 上下margin叠加问题 3.10.4 左右margin加倍问题 3.11 深入浮动(Float) 3.11.1 文档流...
div三行或三列铺满全屏
ch206265的博客
04-07 3427
这里写自定义目录标题一、实现要求二、实现过程1、字体水平居中和垂直居中 一、实现要求 铺满屏，字体居中 交互，点击一个盒子能够改变另外一个盒子的颜色 最开始的实现效果使这样的： 但是有些问题： 字体只有水平居中，没有垂直居中； 第三行的盒子最右边没有铺满，并且，我理解的铺满全屏是指完全铺满，既没有剩余空白，也不会让内容一屏显示不完，也就是说要让屏幕右侧的滚动条和下面的滚动条消失，内容显示完...
div九宫格图片布局
weixin_44770377的博客
05-07 1930
以前我都会用display:flex弹性布局的方式来写，今天学会了一种新写法，不浮动，也不弹性的方式，用div的方式实现。 给div设置固定宽度，并带上右外边距。然后用style对index第4个（一排放4个的话index % 4 === 3 ）的margin-right:0px <div style="width: 100%;min-height: 800px;margin-top: 6...
3行3列表格 table实现，div+css实现
weixin_34392906的博客
03-21 964
table实现： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>&l...
div 左右排列 高度自适应_css小技巧：如何实现多列高度不同的div等高
weixin_40005330的博客
11-29 1274
网页布局中会用到多列div高度等高的情况，最简单的方法是设置为一固定高度，但是如果div内的内容不定的话不能做到自适应高度，今天小编就给大家分享下几种实现多列高度不同的div等高的方法。实现多列高度不同的div等高第一种：利用padding-bottom|margin-bottom正负值相抵；设置父容器设置超出隐藏(overflow:hidden)这样子父容器的高度就还是它里面的列没有设定padd...
[转]DIV布局之三行三列之高度自适应
avm8523362的博客
08-10 195
转自：http://blog.doyoe.com/article.asp?id=18写了几篇宽度自适应的布局后，发现很多朋友都对高度自适应十分感兴趣，于是整理了一篇贴了大家参考一下： 一般来说一个有好几列的布局，每列的内容都是不固定的，或多或少。所以在做布局的时候一般不会给出每列的定高，但这样做却出现了列与列之间的高度不一致，导致陷入灵活有余而精致欠缺的尴尬。 所以设计师们急切的...
HTML_CSS学习：常用文本属性
最新发布
m0_74972727的博客
05-03 296
【代码】HTML_CSS学习：常用文本属性。
html三行两列div布局
09-09
这个HTML三行两列的布局是由著名网页设计师阿捷在2004年发布在《网页设计师》杂志上的，被称为XHTML1标准的DIV CSS布局。它是一个非常经典的布局，可以在IE、Mozilla和Opera浏览器中实现居中和高度自适应。完整的代码如下所示： ```html <!-- 双飞翼布局 --> <div class="container"> <div class="middle"> <div class="inner">中间自适应</div> </div> <div class="left">左边固定宽度200px</div> <div class="right">右边固定宽度200px</div> </div> ``` 对应的CSS代码如下所示： ```css <style> * { margin: 0; padding: 0; } .container { min-width: 600px; height: 300px; background: pink; } .middle { float: left; width: 100%; height: 300px; background-color: turquoise; } .middle .inner { margin: 0 200px; } .left { float: left; width: 200px; height: 300px; margin-left: -100%; background-color: teal; } .right { float: left; width: 200px; height: 300px; margin-left: -200px; background-color: seagreen; } </style> ``` 这种布局的主要特点是中间的自适应部分被嵌套在一个新的父级块中，通过设置左右外边距来实现布局调整。左边和右边的固定宽度部分则通过负外边距进行布局。这种布局可以有效地实现三行两列的效果。注意，这种布局方式增加了一层DOM树节点，可能会增加渲染树生成的计算量。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值