最近在一次项目中，需要用到等高布局，如果采用background的等高方法，代码会比较繁琐，而JS会影响页面的加载效率，于是采用了“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法来做。
看下HTML：
<!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>三列等高布局</title>
<style type="text/css">
* { margin:0; padding:0}
.pub-height { margin-bottom:-10000px; padding-bottom:10000px;}
.float-left { float:left}
.wrapper { overflow:hidden;}
.header { height:200px; background:#ccc;}
.left { background:#00f; width:200px;}
.content { background:#0f0; width:300px;}
.right { background:#f00; width:250px;}
.left, .content, .right {}
</style>
</head>
<body>
<div class="header">head区域</div>
<div class="wrapper">
<div class="left pub-height float-left">权威的系统检测软件,为你提供全面的CPU相关信息报告。... CPU-Z是一个检测CPU信息的免费软件，这些信息包括：CPU 名称、厂商、性能、当前电压、L1 L2 cache情况；</div>
<div class="content pub-height float-left">主体内容部分</div>
<div class="right pub-height float-left">右侧区域</div>
</div>
</body>
</html>
不多解释，主要给自己备份用！
分享到：
相关推荐
三列等高布局旧版flex.html
自适应三列等高布局旧版flex.html
css——之三行三列等高布局图文教程
纯CSS实现三列DIV等高布局.html纯CSS实现三列DIV等高布局.html纯CSS实现三列DIV等高布局.html纯CSS实现三列DIV等高布局.html
等高布局
三列等高CSS布局的一个实例， 修改国外的一个demo， 兼容到了IE5.5 和标准的浏览器OperaFirefoxSafari。 不过hack太多，不是很喜欢这样做。全部代码如下： <?xmlversion=1.0encoding=gb2312?><!...
因为对于三列等高自适应布局和水平垂直居中对齐需要一些对css3中flexbox基础概念的理解，所以会对flexbox的概念做一个简单的介绍，以为后面的实例做一个铺垫。本人一直认为，不管学习任何知识，对于概念的理解都十分...
以最普遍的DIV三列布局来说，想实现三列等高布局，可以借助“overflow”、“padding”和“margin”三个属性来实现。代码如下： HTML代码： 复制代码代码如下: ”container”> ”left”> 左侧</p> 左侧</p> 左侧...
主要介绍了css设置多列等高布局的方法示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
网页上的摄影展:等高响应布局实现 「等高响应式布局」是什么？介绍它之前，我们先回忆一下它的近亲「等宽响应式瀑布流」。
适合前端新手小白的布局方面小技巧，内容主要为利用元素定位和浮动方面的知识实现圣杯布局、双飞翼布局、黏连布局、伪等高布局等，解决浮动元素高度失效和相邻垂直外边距重叠问题，同时还解决ie6下fixed失效问题。
NULL 博文链接：https://hegz.iteye.com/blog/657438
我们在写页面的时候，有的时候会遇到多栏布局，这篇文章主要介绍了前端应该掌握的CSS实现多列等高布局技巧，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Web-前端html+css从入门到精通 170. 布局扩展之等高布局.zip
具体原理，参考了腾讯砖墙布局的思路：http://isux.tencent.com/high-equal-response-layout-html.html
CSS网页布局实例:三栏等高布局.
为了让网页更美观、协调，有的时候需要用到左右等到布局，传统的等高布局是用 javascript 实现...下面来看看实际的例子（三列等高），以下面的 XHTML 代码为例： <div id=wrap><div id=left><p>left</p><p>left</p><p>