Making the nested div to extent to the height of the main div
I am trying for a or b to to match their height w开发者_如何学运维hen one or the other one extends.
<html>
<head>
<style>
#main{
width:300px;
position: relative;
margin: 0 auto;
}
#a{
position:absolute:
bottom:0px;
width:50px;
border: 1px solid #000;
float:left;
}
#b{
position:absolute:
bottom:0px;
width:200px;
border: 1px solid #000;
float:left;
}
</style>
<body>
<div id="main">
<div id='a'><h1>1</ht><h1>1</ht><h1>1</ht><h1>1</ht></div>
<div id='b'>2</div>
</div></div></head></body>
I have a very simple solution. Use css attribute display: table-cell; in .a{} & .b{} style like this:
.a, .b{
display: table-cell;
width:100px;
vertical-align:middle;
text-align:center;
}
See the Demo: http://jsfiddle.net/rathoreahsan/qcCPG/6/
加载中,请稍侯......
精彩评论