3列等高布局 _Web前端

三列等高布局
最近在一次项目中，需要用到等高布局，如果采用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>