标签：
高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色，高度相等还是不相等都无关紧要，因为你只要在这些列的父元素中设置一个背景色就可以了。但是，如果一个或多个列需要单独设置自己的背景色，那么它的视觉完整性的设计就显得非常重要了。大家都知道当初Table实现等高列布局是多么的简单，但是我们使用CSS来创建等高列布局并非是那么容易的事情。
如果一个设计是固定宽度（非流体的宽度设计），那么实现多列等高效果是相当的容易。最好的技术就是使用Dan Cederholm的Faux Columns技术。只要制作一张合适的背景图片，在你多列的父元素中进行垂直铺放，从而达到一种假像（假的多列等高布局效果）。但是在流体布局中要用CSS实现多列等高的设计那就不是那么容易的事情，因为我们没有办法在使用背景图片来实现多列等高的假像了，那么是不是就没有办法实现了呢？那当然不是那么回事了，不管是实现固定布局还是流体布局的等多列等高视觉效果，方法还是蛮多的，这些方法体现了CSS的不同技术，也各有千秋，下面我们就一起来探讨Web页面中的多列等高的实现技术。
下面要介绍的方法都是让我们的布局如何实现多列的等高视觉效果，正如下图所示：
这种方法是我们实现等高列最早使用的一种方法，就是使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假像：
Html Markup
<div class=”container clearfix”> <div class=”left”></div> <div class=”content”></div> <div class=”right”></div> </div>
在制作样式之前需要一张类似下面的背景图：
CSS Code:
优点：
.container {
background: url("column.png") repeat-y;
width: 960px;
margin: 0 auto;
}
.left {
float: left;
width: 220px;
}
.content {
float: left;
width: 480px;
}
.right {
float:left;
width: 220px;
}
实现方法简单，兼容性强，不需要太多的css样式就可以轻松实现。
缺点：
使用这种方法不适合流体布局等高列的布局，另外如果你需要更换背景色或实现其他列数的等高列时，都需要重新制作过背景图。
这种方法实现有点复杂，如果你理解其实现过程也是相当的简单。这种方法我们主要给每一列的背景设在单独的<div>元素上。这种方法的实现的原则是：任何<div>元素的最大高度来撑大其他的<div>容器高度。如下图所示：
上图中，不管我们哪一列的高度最高，那么其三个容器“rightBack,contentBack,leftBack”的高度相应会随最高列的高列变化，下面我们一起来看其实现过程：
Html Markup
<div class="container"> <div class="rightWrap"> <div class="contentWrap"> <div class="leftWrap"> <div class="aside column leftSidebar" id="left"></div> <div id="content" class="column section"></div> <div class="aside rightSidebat column" id="right"></div> </div> </div> </div> </div>
CSS Code:
.container {
width: 960px;
margin: 0 auto;
}
.rightWrap {
width: 100%;
float: left;
background: green;
overflow: hidden;
position: relative;
}
.contentWrap {
float: left;
background: orange;
width: 100%;
position: relative;
right: 320px;/*此值等于rightSidebar的宽度*/
}
.leftWrap{
width: 100%;
background: lime;
float:left;
position: relative;
right: 420px;/*此值等于Content的宽度*/
}
#left {
float: left;
width: 220px;
overflow: hidden;
position: relative;
left: 740px;
}
#content {
float: left;
width: 420px;
overflow: hidden;
position:relative;
left: 740px;
}
#right {
float: left;
overflow: hidden;
width: 320px;
background: #333;
position: relative;
left: 740px;
}
看起来蛮复杂吧？其实你只要了解了它是如何的工作原理就会变得非常简单，你只要理解并掌握以下几点：
用两幅图来展示其实现的过程：
下图是实现上面的第二步对应的示例图，也就是容器“div.rightWrap”，“div.contentWrap”，“div.leftWrap”进行相对定位（position: releative）,并展示了如何设置对应的“right”值。
上图虚线代表的范围是可视范围，其中有两列背景将会溢出，解决这个只需要在最外层容器“div.rightWrap”加上“overflow:hidden”就可以进行隐藏溢出的其他背景色。接下来下图所展示的是上面所说的第五步：
前面我们对三个内容元素都进行了相对定位，现在只需要按第五步将其定位回去，如上图所示。其实说到最后，你只要理解了这两幅，你就什么都清楚了。
优点：
这种方法是不需要借助其他东西（javascript,背景图等）,而是纯CSS和HTML实现的等高列布局，并且能兼容所有浏览器（包括IE6），并且可以很容易创建任意列数。
缺点：
这种方法不像其他方法一样简单明了，给你理解会带来一定难度，但是只要你理解清楚了，将能帮你创建任意列数的等高布局效果。
这种布局可以说是就是第二种布局方法，只是这里是一种多列的流体等高列的布局方法。前面也说过了，其实现原理就是给每一列添加相对应用的容器，并进行相互嵌套，并在每个容器中设置背景色。这里需要提醒大家你有多少列就需要多少个容器，比如说我们说的三列，那么你就需要使用三个容器。如下图所示：
HTML Markup
<div id="container3"> <div id="container2"> <div id="container1"> <div id="col1">Column 1</div> <div id="col2">Column 2</div> <div id="col3">Column 3</div> </div> </div> </div>
CSS Code:
<style type="text/css">
#container3 {
float: left;
width: 100%;
background: green;/**/
overflow: hidden;
position: relative;
}
#container2 {
float: left;
width: 100%;
background: yellow;
position: relative;
right: 30%; /*大小等于col3的宽度*/
}
#container1 {
float: left;
width: 100%;
background: orange;
position: relative;
right: 40%;/*大小等于col2的宽度*/
}
#col1 {
float:left;
width:26%;/*增加了2%的padding，所以宽度减少4%*/
position: relative;
left: 72%;/*距左边呀增加2%就成72%*/
overflow: hidden;
}
#col2 {
float:left;
width:36%;/*增加了2%的padding，所以宽度减少4%*/
position: relative;
left: 76%;/*距左边有三个padding为2%,所以距离变成76%*/
overflow: hidden;
}
#col3 {
float:left;
width:26%;/*增加了2%的padding，所以宽度减少4%*/
position: relative;
left: 80%;/*距左边5个padding为2%，所以距离变成80%*/
overflow: hidden;
}
</style>
上面展示的是三列的，下面我们在来看一下两列和更多列的模板：
两列的HTML Markup：
<div id="container2"> <div id="container1"> <div id="col1">Column 1</div> <div id="col2">Column 2</div> </div> </div>
两列的CSS Code:
<style type="text/css"> #container2 { float: left; width: 100%; background: orange; position: relative; overflow: hidden; } #container1 { float: left; width: 100%; background: green; position: relative; right: 30%; } #col1 { width: 66%; float: left; position: relative; left: 32%; } #col2 { width: 26%; float: left; position: relative; left: 36%; } </style>
四列的HTML Markup：
<div id="container4"> <div id="container3"> <div id="container2"> <div id="container1"> <div id="col1">col1</div> <div id="col2">col2</div> <div id="col3">col3</div> <div id="col4">col4</div> </div> </div> </div> </div>
四列的CSS Code：
<style type="text/css"> #container4 { float: left; width: 100%; background: green; position: relative; overflow: hidden; } #container3 { float: left; width: 100%; background: #B2F0F9; position: relative; right: 20%;/*此值等于col4的宽度*/ } #container2 { float: left; width: 100%; background: #89FFA2; position: relative; right: 30%;/*此值等于col3的宽度*/ } #container1 { float: left; width: 100%; background: #369; position: relative; right: 30%;/*此值等于col2的宽度*/ } #col1 { width: 18%;/*1%的padding*/ float: left; position: relative; left: 81%; overflow: hidden; } #col2 { float: left; width: 28%; position: relative; left: 83%; overflow: hidden; } #col3 { float: left; width: 28%; position: relative; left: 85%; overflow: hidden; } #col4 { float: left; width: 18%; position: relative; left: 87%; overflow: hidden; } </style>
下面来看其实现过程，如果你理解了第二制作方法，那么这个你不用想一下就知道他们是一样的道理，如果你对第二种方法还不够清楚，那么你接着看这下面的内容，你会更清楚他们是怎么一回事的。下面我们一起来看三列的实现过程：
上图展示了，我们有三列，并且也说过了，这三列内容都放在了三个容器的div中，我们每一列的背景色不是放在内容列中，而是放置在容器中，现在我们需要通过对容器进行相对定位，把背景显示出来，而且我们这个容器是最外层的不能进行相对定位的移动，具体的请看下图：
上面我们把容器进行了相对定位，这样一来，我们内容也相应的做了移动，现在我们需要对页面列的内容也进行相对定位，并把内容和容器进行相反方向的定位，这样内容和容器背景色就能对应上了，请看下图所展示的：
接下来我们需要把溢出的部分切掉去，和前面一相，在最外面的容器加上overflow:hidden；这样就OK了。
最后为了让你的效果更加好看一点，你可以尝试给他们加上padding，比如说每列加上2%的padding值，具体实现可以简单从下图中得到：
优点：
兼容各浏览器，可以制作流体等高列，交无列数限制。
缺点：
标签使用较多，结构过于复杂，不易于理解，不过你掌握了其原理也就不难了，这也不算太大缺点
平常在制作中，我们需要制作两列的等高效果，并且有一条边框效果，那么这个实例我们就一起来看其实现方法：
Html Code
<div id="wrapper"> <div id="sidebar"> ..... </div> <div id="main"> .... </div> </div>
CSS Code:
<style type="text/css"> html { background: #45473f; height: auto; } body { width: 960px; margin: 20px auto; background: #ffe3a6; border: 1px solid #efefef; } #wrapper { display: inline-block; border-left: 200px solid #d4c376; position: relative; vertical-align: bottom; } #sidebar { float: left; width: 200px; margin-left: -200px; margin-right: -1px; border-right: 1px solid #888; position: relative; } #main { float: left; border-left: 1px solid #888; } #maing, #sidebar{ padding-bottom: 2em; } </style>
优点：
可以制作带有边框的两列等高布局，并能兼容所有浏览器，结构简单明了。
缺点：
不适合于更多列的应用，比如说三列以上，这样的方法就行不通了。
这种方法很简单，就是在所有列中使用正的上、下padding和负的上、下margin，并在所有列外面加上一个容器，并设置overflow:hiden把溢出背景切掉。下面一起来看代码：
HTML Markup:
<div id="container"> <div id="left" class="column aside"> <p>Sidebar</p> </div> <div id="content" class="column section"> <p>Main content</p> </div> <div id="right" class="column aside"> <p>Sidebar</p> </div> </div>
CSS Code:
<style type="text/css"> #container { margin: 0 auto; overflow: hidden; width: 960px; } .column { background: #ccc; float: left; width: 200px; margin-right: 5px; margin-bottom: -99999px; padding-bottom: 99999px; } #content { background: #eee; } #right { float: right; margin-right: 0; } </style>
优点：
这种可能实现多列等高布局，并且也能实现列与列之间分隔线效果，结构简单，兼容所有浏览器
缺点：
这种方法存在一个很大的缺陷，那就是如果要实现每列四周有边框效果，那么每列的底部（或顶部）将无法有边框效果。
下面我们就针对这个缺陷来介绍两种解决办法，第一种是使用背景图来模仿底部（或顶部）边框；第二种方法是使用div来模仿列的边框，下面我们来看这两种方法：
1、背景图模仿边框效果：
Html Code:
<div id="containerOuter"> <div id="containerInner"> <div id="left" class="column aside"> <p>Sidebar</p> </div> <div id="content" class="column section"> <p>Main content</p> </div> <div id="right" class="column aside"> <p>Sidebar</p> </div> </div> </div>
CSS Code:
<style type="text/css"> #containerOuter { background: url("images/bg.gif") no-repeat center bottom; width: 616px; margin: 0 auto; padding-bottom: 1px; overflow: hidden; } #containerInner { float: left; overflow: hidden; margin-right: -5px; } .column { background: #ccc; border: 1px solid #000; float: left; width: 200px; margin-right: 5px; margin-bottom: -99999px; padding-bottom: 99999px; } #content { background: #eee; } </style>
这种方法我们需要在外面增加一个层，并将背景图放置在这个层的底部，而且需要制作一张和列边框色一致，并且要先排列好他们之间的间距，如下图所示：
这种方法有一个最大的不足之处就是，如果我们更改了列的边框的颜色，或者改变了他们之间的间距，都需要重新制作过一张背景图来重新模仿这样的效果，下面一起来看看这种方法带来的最后效果：
2、使用div来模仿列的边框
我们这种方法是在列里面添加一个div，用这个div来模仿边框的效果，具体看代码吧：
Html Code:
<div class="wrapper"> <div class="container"> <div class="col1"> <div class="colBottom1"><!-- ie needs this comment for small div heights --></div> </div> <div class="col2"> <div class="colBottom2"><!-- ie needs this comment for small div heights --></div> </div> </div> </div>
CSS Code:
<style type="text/css">
.wrapper {
width: 960px;
margin: 0 auto;
}
.container {
position: relative;
overflow: hidden;
zoom: 1;
} /* zoom fix for ie6 */
.col1 {
float: left;
width: 728px;
padding-bottom: 32767px;
margin-bottom: -32767px;
border: #f36 1px solid;
background: #AFAFAF;
}
.col2 {
float: right;
width: 208px;
padding-bottom: 32767px;
margin-bottom: -32767px;
border: #f36 1px solid;
background: #6F6F6F;
}
.colBottom1 {
position: absolute; /*相对于div.container*/
bottom: 0;
left: 0px;/*如果第一列左浮动就设置left:0;*/
height: 1px; /*当前列的边框宽度*/
width: 730px;/*当前列宽度+边框宽度*2 */
background: #f36;/*当前列的边框颜色*/
}
.colBottom2 {
position: absolute; /*相对于div.container*/
bottom: 0;
right: 0px; /*如果第二列右浮动就设置left:0;*/
height: 1px; /*当前列的边框宽度*/
width: 210px; /*当前列宽度+边框宽度*2 */
background: #f36;/*当前列的边框颜色*/
}
</style>
五、使用边框和定位模拟列等高
这种方法是使用边框和绝对定位来实现一个假的高度相等列的效果。假设你需要实现一个两列等高布局，侧栏高度要和主内容高度相等。如：
Html Code:
<div id="wrapper"> <div id="mainContent">...</div> <div id="sidebar">...</div> </div>
CSS Code:
<style type="text/css"> #wrapper { width: 960px; margin: 0 auto; } #mainContent { border-right: 220px solid #dfdfdf; position: absolute; width: 740px; } #sidebar { background: #dfdfdf; margin-left: 740px; position: absolute; width: 220px; } </style>
优点：
结构简单，兼容各浏览器，容易掌握。
缺点：
这个方法就是无法单独给主内容列设置背景色，并且实现多列效果效果不佳。
第五种方法我们无法实现主列的背景色设置，针对上面方法，稍作一下改良，这样就可以实现主内容也设置颜色的效果了
CSS Html:
<div id="container"> <div id="content">This is<br />some content</div> <div id="right">This is the right</div> </div>
CSS Code:
<style type="text/css"> #container{ background-color:#0ff; overflow:hidden; width:960px; margin: 0 auto; } #content{ background-color:#0ff; width:740px; border-right:220px solid #f00; /* 边框大小和颜色设置和right大小与颜色一样 */ margin-right:-220px; /*此负边距大小与right边栏宽度一样*/ float:left; } #right{ background-color:#f00; width:220px; float:left; } </style>
下面我们在此基础上改变流体布局：
HTML Markup
<div id="container">
<div id="content">Main content section</div>
<div id="sidebar">Right Sidebar </div>
</div>
<style type="text/css">
#container{
background-color:#0ff;
overflow:hidden;
margin:0 100px;
padding-right:220px; /* 宽度大小等与边栏宽度大小*/
}
* html #container{
height:1%; /* So IE plays nice */
}
#content{
background-color:#0ff;
width:100%;
border-right:220px solid #f00;
margin-right:-220px;
float:left;
}
#sidebar{
background-color:#f00;
width:220px;
float:left;
margin-right:-220px;
}
</style>
上面主要展示了这种方法的二列布局，下面我们在来看看三列布局的用法
HTML Markup
<div id="containerOuter"> <div id="container"> <div id="content">Main content section</div> <div id="left">LEFT sidebar</div> <div id="right">RIGHT sidebar</div> </div> </div>
CSS Code:
<style type="text/css"> #containerOuter { margin: 0 auto; width: 960px; } #container{ background-color:#0ff; float:left; width:520px; border-left:220px solid #0f0; /* 边框大小等于左边栏宽度，颜色和左边栏背景色一致*/ border-right:220px solid #f00;/* 边框大小等于右边栏宽度，颜色和右边栏背景色一致*/ } #left{ float:left; width:220px; margin-left:-220px; position:relative; } #content{ float:left; width:520px; margin-right:-520px; } #right{ float:right; width:220px; margin-right:-220px; position:relative; } </style>
接着在看一个三列自适应布局
Html Markup
<div id="container"> <div id="content">Main Content</div> <div id="left">Left Sidebar</div> <div id="right">Right Sidebar</div> </div>
CSS Code
<style type="text/css"> body{ margin:0 100px; padding:0 220px 0 220px; } #container{ background-color:#0ff; float:left; width:100%; border-left:220px solid #0f0; border-right:220px solid #f00; margin-left:-220px; margin-right:-220px; display:inline; /* So IE plays nice */ } #left{ float:left; width:220px; margin-left:-220px; position:relative; } #content{ float:left; width:100%; margin-right:-100%; } #right{ float:right; width:220px; margin-right:-220px; position:relative; } </style>
优点：
能兼容所有浏览器效果，结构简单明了，容易掌握。
缺点：
列数受到极限，超过三列不好控制。
这种方法只适合现代浏览器，本不想介绍的，不过还是顺便列出让大家参考一下吧：
HTML Markup:
<div class="container table">
<div class="containerInner tableRow">
<div class="column tableCell cell1">
<div class="left aside">
....
</div>
</div>
<div class="column tableCell cell2">
<div class="content section">
...
</div>
</div>
<div class="column tableCell cell3">
<div class="right aside">
...
</div>
</div>
</div>
</div>
CSS Code:
<style type="text/css"> .table { width: auto; min-width: 1000px; margin: 0 auto; padding: 0; display:table; } .tableRow { display: table-row; } .tableCell { display: table-cell; width: 33%; } .cell1 { background: #f00; } .cell2 { background: #0f0; } .cell3 { background: #00f; } </style>
优点：
这是一种非常简单，易于实现的方法。
缺点：
兼容性不好，在ie6-7无法正常运行。
最后要给大家介绍的是使用jQuery和javascript方法来实现多列的布局效果。
1、jQuery实现方法:
Html Markup
<div class="container"> <div id="left" class="aside leftSidebar"></div> <div id="content" class="section"></div> <div id="right" class="aside rightSidebar"></div> </div>
CSS Code:
<style type="text/css"> .contanier { width: 960px; margin: 0 auto; } .aside, .section { float:left; width: 33%; background: lime; } .leftSidebar {background: orange;} .section { background: green;} </style>
jQuery Code:
<script type="text/javascript"> $(document).ready(function(){ //等高列的小插件 function setEqualHeight(columns) { var tallestColumn = 0; columns.each(function(){ currentHeight = $(this).height(); if(currentHeight > tallestColumn) { tallestColumn = currentHeight; } }); columns.height(tallestColumn); } //调用写好的插件，基中“.container > div”是你需要实现的等高列 setEqualHeight($(".container > div")); }); </script>
你也可以把上面的jQuery代码换成下面的
<script type="text/javascript"> $(document).ready(function(){ var currentTallest = 0, currentRowStart = 0, rowDivs = new Array(), $el, topPosition = 0; $(‘.column‘).each(function() { $el = $(this); topPostion = $el.position().top; if (currentRowStart != topPostion) { // we just came to a new row. Set all the heights on the completed row for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { rowDivs[currentDiv].height(currentTallest); } // set the variables for the new row rowDivs.length = 0; // empty the array currentRowStart = topPostion; currentTallest = $el.height(); rowDivs.push($el); } else { // another div on the current row. Add it to the list and check if it‘s taller rowDivs.push($el); currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest); } // do the last row for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { rowDivs[currentDiv].height(currentTallest); } });? }); </script>
如果你使用上面这个jQuery代码，你需要在需要实现等高列的div中加上"column"类名，这样才会有效果的。
2、JavaScript方法
上面是jQuery的实现方法，接下来看看javaScript的实现方法：
Html Markup:
<div class="contanier"> <div class="column" id="left"></div> <div id="content" class="column"></div> <div id="right" class="column"></div> </div>
CSS Code:
<style type="text/css"> .contanier { width: 960px; margin: 0 auto; } #left { width: 220px; float: left; margin-right: 20px; background: green; } #content { width: 480px; float: left; margin-right: 20px; background: lime; } #right { width: 220px; float: right; background: orange; } </style>
Javascript Code:
<script type="text/javascript">
function matchColumns(classname){
var divs,contDivs,maxHeight,divHeight,d;
// get all <div> elements in the document
divs=document.getElementsByTagName(‘div‘);
contDivs=[];
// initialize maximum height value
maxHeight=0;
// iterate over all <div> elements in the document
for(var i=0;i<divs.length;i++){
// make collection with <div> elements with class attribute ‘container‘
if(new RegExp("\\b" + classname + "\\b").test(divs[i].className)){
d=divs[i];
contDivs[contDivs.length]=d;
// determine height for <div> element
if(d.offsetHeight){
divHeight=d.offsetHeight;
}
else if(d.style.pixelHeight){
divHeight=d.style.pixelHeight;
}
// calculate maximum height
maxHeight=Math.max(maxHeight,divHeight);
}
}
// assign maximum height value to all of container <div> elements
for(var i=0;i<contDivs.length;i++){
contDivs[i].style.height=maxHeight + "px";
}
}
// Runs the script when page loads
window.onload=function(){
if(document.getElementsByTagName){
matchColumns(‘column‘); // class=maincolumn
}
}
</script>上面八大种方法就是我今天要跟大家一起分享的等高列的布局方法，他们之间更有千秋，希望能给需要的您带来一定的帮助。篇幅过长，慢慢看吧，上面的代码都是经过测试的，兼容各大浏览器，可以直接复制代码使用。
来源： <http://www.w3cplus.com/css/creaet-equal-height-columns>
实现最小高度的设置，这个方法很简单：
min-height: 200px; height: auto !important; height: 200px;
上面的代码就轻松的帮我们实现了跨浏览器的最小高度设置问题。
试题要求
面试题的具体要求吧：
方法一：
别的不多说，直接上代码，或者参考在线DEMO，下面所有的DEMO都有HTML和CSS代码，感兴趣的同学自己慢慢看吧。
HTML Markup
<div id="container"> <div id="wrapper"> <div id="sidebar">Left Sidebar</div> <div id="main">Main Content</div> </div> </div>
CSS Code
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: auto;
}
body {
margin: 0;
padding: 0;
}
#container {
background: #ffe3a6;
}
#wrapper {
display: inline-block;
border-left: 200px solid #d4c376;/*==此值等于左边栏的宽度值==*/
position: relative;
vertical-align: bottom;
}
#sidebar {
float: left;
width: 200px;
margin-left: -200px;/*==此值等于左边栏的宽度值==*/
position: relative;
}
#main {
float: left;
}
#maing,
#sidebar{
min-height: 200px;
height: auto !important;
height: 200px;
}
</style>
查看在线DEMO。
方法二
HTML Markup
<div id="container"> <div id="left" class="aside">Left Sidebar</div> <div id="content" class="section">Main Content</div> </div>
CSS Code
<style type="text/css">
*{margin: 0;padding: 0;}
#container {
overflow: hidden;
}
#left {
background: #ccc;
float: left;
width: 200px;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#content {
background: #eee;
margin-left: 200px;/*==此值等于左边栏的宽度值==*/
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#left,
#content {
min-height: 200px;
height: auto !important;
height: 200px;
}
</style>
查看在线的DEMO。
方法三：
HTML Markup
<div id="container"> <div id="content">Main Content</div> <div id="sidebar">Left Sidebar</div> </div>
CSS Code
*{margin: 0;padding: 0;}
#container{
background-color:#0ff;
overflow:hidden;
padding-left:220px; /* 宽度大小等与边栏宽度大小*/
}
* html #container{
height:1%; /* So IE plays nice */
}
#content{
background-color:#0ff;
width:100%;
border-left:220px solid #f00;/* 宽度大小等与边栏宽度大小*/
margin-left:-220px;/* 宽度大小等与边栏宽度大小*/
float:right;
}
#sidebar{
background-color:#f00;
width:220px;
float:right;
margin-left:-220px;/* 宽度大小等与边栏宽度大小*/
}
#content,
#sidebar {
min-height: 200px;
height: auto !important;
height: 200px;
}
查看在线DEMO效果。
方法四：
HTML Markup
<div id="container2"> <div id="container1"> <div id="col1">Left Sidebar</div> <div id="col2">Main Content</div> </div> </div>
CSS Code
*{padding: 0;margin:0;}
#container2 {
float: left;
width: 100%;
background: orange;
position: relative;
overflow: hidden;
}
#container1 {
float: left;
width: 100%;
background: green;
position: relative;
left: 220px;/* 宽度大小等与边栏宽度大小*/
}
#col2 {
position: relative;
margin-right: 220px;/* 宽度大小等与边栏宽度大小*/
}
#col1 {
width: 220px;
float: left;
position: relative;
margin-left: -220px;/* 宽度大小等与边栏宽度大小*/
}
#col1,#col2 {
min-height: 200px;
height: auto !important;
height: 200px;
}
查看在线DEMO。
方法五：
HTML Markup
<div id="container1"> <div id="container"> <div id="left">Left Sidebar</div> <div id="content"> <div id="contentInner">Main Content</div> </div> </div> </div>
CSS Code
*{padding: 0;margin: 0;}
#container1 {
float: left;
width: 100%;
overflow: hidden;
position: relative;
background-color: #dbddbb;
}
#container {
background-color: orange;
width: 100%;
float: left;
position: relative;
left: 220px;/* 宽度大小等与边栏宽度大小*/
}
#left {
float: left;
margin-right: -100%;
margin-left: -220px;/* 宽度大小等与边栏宽度大小*/
width: 220px;
}
#content {
float: left;
width: 100%;
margin-left: -220px;/* 宽度大小等与边栏宽度大小*/
}
#contentInner {
margin-left: 220px;/* 宽度大小等与边栏宽度大小*/
overflow: hidden;
}
#left,
#content {
min-height: 200px;
height: auto !important;
height: 200px;
}
查看在线DEMO。
针对上面的面试题要求，我一共使用了五种不同的方法来实现，经过测试都能在各浏览器中运行，最后我有几点需要特别提出：
那么有关于这个面试题，就我自己的拙见，就说到这吧。希望大家会喜欢这样的答案，如果您有更好的答案，烦请告诉我一下，让我也好好学习学习。
来源： <http://625514418-qq-com.iteye.com/blog/1912450>
什么是等高布局?
先来看一个案例：
上图中的页面的主体内容是两列结构，左列是用来导航的，右列是用来显示内容的。我们看到它们有一个共同的边框，中间还有一条分隔线，左右两列的高度都是不固定的。这种情况下就需要两列的高度保持一致了，左边高度增加，右边也跟着增加，右边高度增加，左边同样也要增加，否则就会出现“断层”的效果。在这里，等高布局是为了维护边框线条的完整性，在有些地方则可能是为了维护背景的完整性，达到整体一致不缺失的效果。
布局方案
等高布局有几种不同的方法，但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法。首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，所以就成功的完成了一个障眼法。
代码
先来看下没有等高布局的情况
下面全部都写上了clear:both;
效果：
然后我们应用等高布局：
效果如下：
在进行具体操作的时候，padding-bottom的值大小取决于你的项目的实际情况，如果不确定，设大一点也无所谓。
最终的代码：
来源： <http://www.cnblogs.com/2050/archive/2012/07/31/2616460.html>
<!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/zhrn/p/4466626.html
