div css 左右高度相等问题
这个问题,我查找过,3个解决办法。js不使用。其他两种方法,我都尝试过,不能解决我的问题,希望高手指点:
问题表述:
html
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
css
#main{
width:99%;
height:auto;
background-color: #FFFFFF;
padding-left:3px;
padding-right:3px;
margin-bottom:10px;
padding-bottom:10px;
border:2px solid #BCBCBC;
overflow: hidden;
}
#main:after
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#main
{
display: inline-block;
}
/*\*/
#main
{
display: block;
}
#left, #right
{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#left, #right
{
padding-bottom: 0px !important;
margin-bottom: 0px !important;
}
#left:before, #right:before
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height: 0;
}
}
3个div都要有边框,同时left,right高度一致。现在是,div right 的border-bottom只是无法显示出来,原因是它的border-bottom被overflow: hidden;了。请问,什么办法可以解决?