让并排的两个Div自适应高度（一样高）

最新推荐文章于 2024-08-05 00:42:25 发布

Everything1209

最新推荐文章于 2024-08-05 00:42:25 发布

阅读量1.2w

点赞数

分类专栏： Html5/CSS

Html5/CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

需求：

解决办法：

上述问题的解决办法是采用JS

部分html如下：

	<div class="main_content">
		<div class="per_list">
			<ul>
				<li><span>姓名:{$insuranceInfo.real_name}</span></li>
				<li><span>电话:{$insuranceInfo.phone_mob}</span></li>
                                <li><span>邮箱:<if condition="$insuranceInfo.email == '' ">暂无<else/>{$insuranceInfo.email}</if></span></li>
			</ul>
			
		</div>	
		<div class="resume">
			<h3 style=" margin-top:15px;">个人经历：</h3>
			<div class="img_resume" id='exp_1'>
				<ul>
					<li></li>
				</ul>
				
			</div>	
			<div class="resume_content" id='exp_2'>
                            {$insuranceInfo.personal_exp}
			</div>
		</div>
            <div class="resume">
                <h3 style=" margin-top:15px;">所获荣誉：</h3>
                <div class="img_resume" id="g_1">
                    <ul>
                        <li></li>
                    </ul>

                </div>	
                <div class="resume_content" id="g_2">
                    {$insuranceInfo.personal_glory}
                </div>
            </div>
	</div>

js代码：

<script type="text/javascript">

<!--

window.οnlοad=window.οnresize=function(){

if(document.getElementById("exp_2").clientHeight<document.getElementById("exp_1").clientHeight){

document.getElementById("exp_2").style.height=document.getElementById("exp_1").offsetHeight+"px";

}

else{

document.getElementById("exp_1").style.height=document.getElementById("exp_2").offsetHeight+"px";

}
if(document.getElementById("g_2").clientHeight<document.getElementById("g_1").clientHeight){

document.getElementById("g_2").style.height=document.getElementById("g_1").offsetHeight+"px";

}

else{

document.getElementById("g_1").style.height=document.getElementById("g_2").offsetHeight+"px";

}
}

-->

</script>

如下为转载

由于设计页面需要，要把两个并排显示的div实现一样高的效果，n行n列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标。方法有以下几种：1、JS实现（判断2个div高）；2、纯css方法；3、加背景图片实现。首先说下本博客实现的2个div一样高的方法（即js方法）。

div+css基本布局：

<div id="mm">


<div id="mm1"></div>


<div id="mm2"></div>


</div>

1、js实现div自适应高度

代码如下：

<script type="text/javascript">


<!--


window.οnlοad=window.οnresize=function(){


if(document.getElementById("mm2").clientHeight<document.getElementById("mm1").clientHeight){


document.getElementById("mm2").style.height=document.getElementById("mm1").offsetHeight+"px";


}


else{


document.getElementById("mm1").style.height=document.getElementById("mm2").offsetHeight+"px";


}


}


-->


</script>

（注：网上公布了不少方法，但代码或多或少有错；上面的是无错代码；我测试在IE6.0/IE7.0下通过，考虑绝大数人仍然用的是IE，所以并没有在opera和firefoxs下调试，哪位用的是opera或ff，可以帮忙看看飘易博客的DIV是否保持了一致的高度。）

2、纯CSS方法

css里代码（调试通过，但不会显示div下边框，即border-bottom）：

/*左右自适应相同高度start*/


#m1,#m2


{


padding-bottom: 32767px !important;


margin-bottom: -32767px !important; 


}


@media all and (min-width: 0px) {


#m1,#m2


{


padding-bottom: 0 !important;


margin-bottom: 0 !important; 


}


#m1:before, #m2:before


{


content: '[DO NOT LEAVE IT IS NOT REAL]';


display: block;


background: inherit;


padding-top: 32767px !important;


margin-bottom: -32767px !important;


height: 0;


}


}


/*左右自适应相同高度end*/

3、加背景图片

这个方法，很多大网站在使用，如163，sina等。

XHTML代码：

<div id="wrap">


<div id="column1">这是第一列</div>


<div id="column1">这是第二列</div>


<div class="clear"></div>


</div>

CSS代码:

#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}


#column1{ float:left; width:300px;}


#column2{ float:right; width:476px;}


.clear{ clear:both;}

还有其他的一些方法，但主流就是这几种了。如果你还有关于多个div自适应高度的好的代码，请给我们留言，欢迎与我们讨论。

参考如下文章：http://blog.163.com/sharesun@126/blog/static/5749096200931121250435/