使两个并排的div的高度相等 [英] Making two side by side div's heights equal
问题描述
所以我从表设计网页，并认为我会给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;
}
示例：
http://jsfiddle.net/VdfJh/
并选中此链接：
http ：//matthewjamestaylor.com/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: http://jsfiddle.net/VdfJh/
and check this link:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
这篇关于使两个并排的div的高度相等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
