什么是等高布局?

先来看一个案例：

上图中的页面的主体内容是两列结构，左列是用来导航的，右列是用来显示内容的。我们看到它们有一个共同的边框，中间还有一条分隔线，左右两列的高度都是不固定的。这种情况下就需要两列的高度保持一致了，左边高度增加，右边也跟着增加，右边高度增加，左边同样也要增加，否则就会出现“断层”的效果。在这里，等高布局是为了维护边框线条的完整性，在有些地方则可能是为了维护背景的完整性，达到整体一致不缺失的效果。

布局方案

等高布局有几种不同的方法，但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法。首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，所以就成功的完成了一个障眼法。

代码

先来看下没有等高布局的情况

效果：

然后我们应用等高布局：

效果如下：

在进行具体操作的时候，padding-bottom的值大小取决于你的项目的实际情况，如果不确定，设大一点也无所谓。

最终的代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>高度自适应布局</title>

<style>

body{ padding:0; margin:0; color:#f00;}

.container{ margin:0 auto; width:600px; border:3px solid #00C;

    overflow:hidden; /*这个超出隐藏的声明在IE6里不写也是可以的*/

}

.left{ float:left; width:150px; background:#B0B0B0;

    padding-bottom:2000px;

    margin-bottom:-2000px;

}

.right{ float:left; width:450px; background:#6CC;

   padding-bottom:2000px;

   margin-bottom:-2000px;

}

</style>

</head>

<body>

<div class="container">

    <div class="left">我是left</div>

    <div class="right">我是right<br><br><br>现在我的高度比left高，但left用它的padding-bottom补偿了这部分高度</div>

    <div style="clear:both"></div>

</div>

</body>

</html>

转自：http://www.cnblogs.com/2050/archive/2012/07/31/2616460.html

css奇技淫巧之—多列等高的更多相关文章

  1. 纯css实现div三列等高布局的最简单方法简化版/也可以多列

    使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...

  2. CSS技巧 (2) · 多列等高布局

    前言  最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两 ...

  3. 三列等高 css实现

    实现这个三列等高 布局需要最外层的一个div wrap容器 里面有三个div容器 这个最外层div 需要移除隐藏 overflow:hidden;  关键点就是三列div 同时margin-botto ...

  4. css设置多列等高布局

    初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...

  5. CSS 3列等高

    方法1: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"&g ...

  6. 【CSS】 布局之多列等高

    这两天看了不少文章,对于css布局多了一些理解,现在来总结下. 我们来写一个最普遍的Top.Left.Content.Right.Foot布局. 第一步:自然是写一个坯子 <!DOCTYPE H ...

  7. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

  8. 多种方法实现div两列等高（收集整理）

    HTML骨架 <div id="header">头部</div> <div id ="container"> <div ...

  9. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

随机推荐

  1. xxx was built without full bitcode" 编译错误解决

    xxx was built without full bitcode" 编译错误解决 iOS 打包上线 All object files and libraries for bitcode ...

  2. python实现无序列表：链表

    介绍链表前我们先了解下什么是列表. 在对基本数据结构的讨论中,我们使用 Python 列表来实现所呈现的抽象数据类型.列表是一个强大但简单的收集机制,为程序员提供了各种各样的操作.然而,不是所有的编程 ...

  3. RTP Payload Format for Opus Speech and Audio Codec

    [Docs] [txt|pdf] [Tracker] [WG] [Email] [Diff1] [Diff2] [Nits] Versions: (draft-spittka-payload-rtp- ...

  4. bzoj 3171: [Tjoi2013]循环格 最小费用最大流

    题目大意: http://www.lydsy.com/JudgeOnline/problem.php?id=3171 题解: 首先我们很容易发现一个结论: 出现完美循环当且仅当所有点的出入度均为1 所 ...

  5. Redo Log File（inactive、active）损坏，处理恢复对策

    redolog的生命周期中共有四种状态:current -> 正在使用的active -> 非正在使用的,对应的Dirty Block还没有完全写入到数据文件中inactive -> ...

  6. BZOJ3545：[ONTAK2010]Peaks

    浅谈线段树合并:https://www.cnblogs.com/AKMer/p/10251001.html 题目传送门:https://lydsy.com/JudgeOnline/problem.ph ...

  7. bzoj 1185 最小矩形覆盖 —— 旋转卡壳

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1185 枚举一条边,维护上.左.右方的点: 上方点到这条边距离最远,所以用叉积求面积维护: 左 ...

  8. poj 1637 Sightseeing tour —— 最大流+欧拉回路

    题目:http://poj.org/problem?id=1637 建图很妙: 先给无向边随便定向,这样会有一些点的入度不等于出度: 如果入度和出度的差值不是偶数,也就是说这个点的总度数是奇数,那么一 ...

  9. NetScaler VPX在Azure上的部署（一）

    本文将介绍NetScaler的VPX部署在Azure China上.包括如何通过vhd文件上传.创建虚拟机,以及如何部署VPX. 一.首先将VHD文件解压,放到目录D:\Azure中.VHD文件的获得 ...

  10. Azure CLI下载Azure Storage Container内的所有文件

    在某些场景下,客户需要把Azure Storage的某一个container内的内容都下载到本地.当然采用PowerShell可以定时的进行下载的动作,但有时客户的环境是Linux或MacOS,这时需 ...