前面的话

  等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高。本文将介绍边框模拟、负margin这两种伪等高以及table实现、absolute实现、flex实现、grid实现和js判断这五种真等高布局

伪等高

边框模拟

  因为元素边框和元素高度始终是相同高度,用元素的边框颜色来伪装左右两个兄弟元素的背景色。然后将左右两个透明背景的元素使用absolute覆盖在中间元素的左右边框上,实现视觉上的等高效果

  [注意]左右两侧元素的内容高度不能大于中间元素内容高度,否则无法撑开容器高度

<style>
body,p{margin: 0;}
.parent{
position: relative;
}
.center{
box-sizing:border-box;
padding: 0 20px;
background-clip: content-box;
border-left: 210px solid lightblue;
border-right: 310px solid lightgreen;
}
.left{
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.right{
position: absolute;
top: 0;
right: 0;
width: 300px;
}
</style>
<div class="parent" style="background-color: lightgrey;">
<div class="left">
<p>left</p>
</div>
<div class="center" style="background-color: pink;">
<p>center</p>
<p>center</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>

负margin

  因为背景是在padding区域显示的,设置一个大数值的padding-bottom,再设置相同数值的负的margin-bottom,使背景色铺满元素区域,又符合元素的盒模型的计算公式,实现视觉上的等高效果

  [注意]如果页面中使用<a>锚点跳转时,将会隐藏部分文字信息

  [注意]如果页面中的背景图片定位到底部,将会看不到背景图片

<style>
body,p{margin: 0;}
.parent{
overflow: hidden;
}
.left,.centerWrap,.right{
float: left;
width: 50%;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.center{
margin: 0 20px;
}
.left,.right{
width: 25%;
}
</style>
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="centerWrap">
<div class="center" style="background-color: pink;">
<p>center</p>
<p>center</p>
</div>
</div> <div class="right" style="background-color: lightgreen;">
<p>right</p>
</div>
</div>

真等高

table

  table元素中的table-cell元素默认就是等高的

<style>
body,p{margin: 0;}
.parent{
display: table;
width: 100%;
table-layout: fixed;
}
.left,.centerWrap,.right{
display: table-cell;
}
.center{
margin: 0 20px;
}
</style>
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="centerWrap">
<div class="center" style="background-color: pink;">
<p>center</p>
<p>center</p>
</div>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
</div>
</div>

absolute

  设置子元素的top:0;bottom:0;使得所有子元素的高度都和父元素的高度相同,实现等高效果

<style>
body,p{margin: 0;}
.parent{
position: relative;
height: 40px;
}
.left,.center,.right{
position: absolute;
top: 0;
bottom: 0;
}
.left{
left: 0;
width: 100px;
}
.center{
left: 120px;
right: 120px;
}
.right{
width: 100px;
right: 0;
}
</style>
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="center" style="background-color: pink;">
<p>center</p>
<p>center</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
</div>
</div>

flex

  flex中的伸缩项目默认都拉伸为父元素的高度,也实现了等高效果

<style>
body,p{margin: 0;}
.parent{
display: flex;
}
.left,.center,.right{
flex: 1;
}
.center{
margin: 0 20px;
}
</style>
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="center" style="background-color: pink;">
<p>center</p>
<p>center</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
</div>
</div>

grid

<style>
body,p{margin: 0;}
.parent{
display: grid;
grid-auto-flow: column;
grid-gap:20px;
}
</style>
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="center" style="background-color: pink;">
<p>center</p>
<p>center</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
</div>
</div>

js

  当子元素高度不同时,进行js判断,增加较低子元素的padding-bottom,使得各个子元素实现等高效果

<style>
body,p{margin: 0;}
.parent{overflow: hidden;}
.left,.center,.right{
float: left;
width: 25%;
}
.center{
width: 50%;
padding: 0 20px;
background-clip: content-box;
box-sizing: border-box;
}
</style>
<div class="parent" id="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="center" style="background-color: pink;">
<p>center</p>
<p>center</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
</div>
</div>
<script>
function getCSS(obj,style){
if(window.getComputedStyle){
return getComputedStyle(obj)[style];
}
return obj.currentStyle[style];
}
var oParent = document.getElementById('parent');
var oLeft = oParent.getElementsByTagName('div')[0];
var oCenter = oParent.getElementsByTagName('div')[1];
var oRight = oParent.getElementsByTagName('div')[2];
function eqHeight(obj1,obj2){
var oDis = obj1.clientHeight - obj2.clientHeight;
if(oDis > 0){
obj2.style.paddingBottom = parseFloat(getCSS(obj2,'padding-bottom')) + oDis + 'px';
}else{
obj1.style.paddingBottom = parseFloat(getCSS(obj1,'padding-bottom')) + Math.abs(oDis) + 'px';
}
}
eqHeight(oLeft,oCenter);
eqHeight(oLeft,oRight);
</script>

CSS等高布局的6种方式的更多相关文章

  1. CSS等高布局的7种方式

    前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高.本文将介绍边框模拟.负margin这两种伪等高以及tabl ...

  2. CSS全屏布局的5种方式

    × 目录 [1]float [2]inline-block [3]table[4]absolute[5]flex[6]总结 前面的话 全屏布局在实际工作中是很常用的,比如管理系统.监控平台等.本文将介 ...

  3. CSS全屏布局的6种方式

    前面的话 全屏布局在实际工作中是很常用的,比如管理系统.监控平台等.本文将介绍关于全屏布局的6种思路 float [1]float + calc 通过calc()函数计算出.middle元素的高度,并 ...

  4. 实现CSS等分布局的4种方式

    × 目录 [1]float [2]inline-block [3]table[4]flex 前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式 思路一: flo ...

  5. 实现CSS等分布局的5种方式

    前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的5种方式 float [思路一]float 缺点:结构和样式存在耦合性,IE7-浏览器下对宽度百分比取值存在四舍五入的 ...

  6. CSS实现水平垂直居中的1010种方式

    转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...

  7. 【css】清除浮动的几种方式

    [css]清除浮动的几种方式   因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...

  8. web网页 页面布局的几种方式(转)

    web网页 页面布局的几种方式 转载 2017年06月16日 12:19:40 2218 网页基本布局方式: (1)流式布局 Fluid 流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同 ...

  9. CSS三栏布局的四种方法

    总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...

随机推荐

  1. PSP&进度条

    11号 类别 开始时间 结束时间 间隔 净时间 燃尽图 8::00 8:20 0 20分钟 站立会议 8:20 8:50 0 30分钟 读构建之法 9:20 13:20 120分钟 120分钟 四人小 ...

  2. 如何在Windows中编译Linux Unix的代码(采用cygwin)?

    来源:http://www.cnblogs.com/rocky_yi/archive/2009/12/08/cygwin.html   作者:rocky_y 很多经典算法往往是用C++在linux下实 ...

  3. 对文本行按特定字段排序(前N个字符或后N个字符),TCPL 练习5-17

    The C programming language 的关于文本行排序的问题有很多种要求的方式,在对每行的字段排序方面,最简单的是例如对前N个字符或者末位N个字符进行排序,更高一点的要求是,对特殊符号 ...

  4. [转]全面理解Unity加载和内存管理

    [转]全面理解Unity加载和内存管理 最近一直在和这些内容纠缠,把心得和大家共享一下: Unity里有两种动态加载机制:一是Resources.Load,一是通过AssetBundle,其实两者本质 ...

  5. 高亮 TRichEdit 当前行

    var   gStart, gLength, gCol: Integer; procedure SetRichEdit(aRichEdit: TRichEdit); var   fRow, fCol: ...

  6. s:textarea中的文本内容在什么时候才能被赋值给Action中的属性?

    下面是jsp程序片段: <s:form id="startForm" name ="startForm" action="/hall/hall_ ...

  7. java反射机制初探

    最近和一位师兄交流了一下Java,真可谓是大有收获,让我好好的学习了一下javad的反射机制,同终于明白了spring等框架的一个基本实现的思想,那么今天就和大家分享一下java的反射机制. 反射,r ...

  8. 使用JS或jQuery模拟鼠标点击a标签事件

    <a id="alink" href="abc.aspx"  style="visibility: hidden;">下一步&l ...

  9. Http规范

    1. 关于 HTTP Basic Authentication http://blog.itpub.net/23071790/viewspace-709367/ 通过以下代码,提示用户登录 Respo ...

  10. 细说angular Form addControl方法

    在本篇博文中,我们将接触angular的验证.angular的验证是由form 指令和ngModel协调完成的.今天博主在这里想要说的是在验证在的一种特殊情况,当验证控件没有没有name属性这是不会被 ...