使两个并排的div的高度相等

本文介绍了使两个并排的div的高度相等的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

所以我从表设计网页，并认为我会给div和CSS一个尝试，所以我希望你可以帮助我这个。

情况：

我目前有以下div结构：

code>< div id =header> < div id =headline> < / div> < div id =login> < / div> < / div> < div style =clear：both; /> < div id =mainbodystyle =border-top：black solid 2px;> < div id =menu> < / div> < div id =bodyContent> < / div> < / div> < div style =clear：both;>< / div> < div id =footer>< / div>

我有以下CSS编码：

#mainbody { background-color：white; width：1000px; margin-left：auto; margin-right：auto; } #menu { width：137px; float：left; background-color：#EEEEEE; padding-left：3px; } #bodyContent { float：right; width：850px; background-color：white; padding：5px; } #headline { width：693px; height：75px; float：left; background-color：white; font-family：monospace; font-size：48pt; font-weight：bold; padding-left：7px; } #login { height：75px; width：300px; float：right; background-color：white; } #header { background-color：white; width：1000px; margin-left：auto; margin-right：auto; } #footer { border-top：black solid medium; width：1000px; background-color：white; margin-left：auto; margin-right：auto; height：50px; }

问题： b

menu和bodyContentdiv在我的页面上有不同的高度。所以如果我有一个相当大的bodyContent页面，菜单div不会一直向下到footerdiv。如果menudiv高于bodyContentdiv，同样的问题存在。

我想menu和bodyContent height / go to footer div。

我已经尝试寻找解决方案，但到目前为止还没有任何结果，我期待。

解决方案

请尝试：

HTML

< div id =container3> < div id =container2> < div id =container1> < div id =col1>栏1< / div> < div id =col2>栏2栏2栏2栏2栏2栏2栏2C栏2栏2栏2栏2栏2栏2栏2栏2栏2栏2栏2栏2栏2栏2栏2栏2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2< / div> < div id =col3>第3列< / div> < / div> < / div> < / div>

CSS

＃container3 { float：left; width：100％; background：green; overflow：hidden; position：relative; } ＃container2 { float：left; width：100％; background：yellow; position：relative; right：30％; } ＃container1 { float：left; width：100％; background：red; position：relative; right：40％; } ＃col1 { float：left; width：26％; position：relative; left：72％; overflow：hidden; } ＃col2 { float：left; width：36％; position：relative; left：76％; overflow：hidden; } ＃col3 { float：left; width：26％; position：relative; left：80％; overflow：hidden; }

示例： jsfiddle/VdfJh/

并选中此链接：

http ：//matthewjamestaylor/blog/equal-height-columns-cross-browser-css-no-hacks

So i'm comming from table design webpages and thought i'd give div and CSS a try, so I hope you can help me on this.

Situation:

I currently have the following div structure:

<div id="header"> <div id="headline"> </div> <div id="login"> </div> </div> <div style="clear: both;" /> <div id="mainbody" style="border-top: black solid 2px;"> <div id="menu"> </div> <div id="bodyContent"> </div> </div> <div style="clear: both;"></div> <div id="footer"></div>

And I have the following CSS coding:

#mainbody { background-color: white; width: 1000px; margin-left: auto; margin-right: auto; } #menu { width: 137px; float: left; background-color: #EEEEEE; padding-left: 3px; } #bodyContent { float: right; width: 850px; background-color: white; padding: 5px; } #headline { width: 693px; height: 75px; float: left; background-color: white; font-family: monospace; font-size: 48pt; font-weight: bold; padding-left: 7px; } #login { height: 75px; width: 300px; float: right; background-color: white; } #header { background-color: white; width: 1000px; margin-left: auto; margin-right: auto; } #footer { border-top: black solid medium; width: 1000px; background-color: white; margin-left: auto; margin-right: auto; height: 50px; }

Problem:

The "menu" and "bodyContent" divs have different heights through out my pages. So if i have a fairly large "bodyContent" page, the "menu" div will not go all the way down to the "footer" div. The same problem exists if the "menu" div is higher than "bodyContent" div.

I would like for both "menu" and "bodyContent" divs to have the same height/go down to the footer div.

I have tried looking for solution but the so far haven't got any result that i was expecting. I'm hoping you guys can help me on this.

Thanks

解决方案

try this:

HTML

<div id="container3"> <div id="container2"> <div id="container1"> <div id="col1">Column 1</div> <div id="col2">Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2</div> <div id="col3">Column 3</div> </div> </div> </div>​

CSS

#container3 { float:left; width:100%; background:green; overflow:hidden; position:relative; } #container2 { float:left; width:100%; background:yellow; position:relative; right:30%; } #container1 { float:left; width:100%; background:red; position:relative; right:40%; } #col1 { float:left; width:26%; position:relative; left:72%; overflow:hidden; } #col2 { float:left; width:36%; position:relative; left:76%; overflow:hidden; } #col3 { float:left; width:26%; position:relative; left:80%; overflow:hidden; }​

Example: jsfiddle/VdfJh/

and check this link:

matthewjamestaylor/blog/equal-height-columns-cross-browser-css-no-hacks