
			<p><strong>最近在工作中碰到一个需求：</strong></p>
<p>有左右2个并列的div，2个div都不能限定高度。左div为导航，右div为内容。如何能让左div块自动获得和右div块相等的高度？</p>
<p>同时，也有网友提问到“如果右块高度比左块低，会不会导致左块的内容被溢出不显示之类的问题。应该是取左右2者的最高值吧来对齐吧”。</p>
<p><img class="alignnone size-full wp-image-3544" title="image2" src="http://www.daqianduan.com/wp-content/uploads/2011/05/image2.png" alt="" width="390" height="178" /></p>
<p>的确应该是哪个div Height值大，就将其值赋给Height值小的div，从而使2个div高度始终保持一致。看代码：</p>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;"><span style="color: #708;">function</span> <span style="color: #000;">$</span>(<span style="color: #00f;">id</span>){ 
	<span style="color: #708;">return</span> <span style="color: #000;">document</span>.<span style="color: #000;">getElementById</span>(<span style="color: #000-2;">id</span>) 
} 
<span style="color: #708;">function</span> <span style="color: #000;">getHeight</span>() { 
	<span style="color: #708;">if</span> (<span style="color: #000;">$</span>(<span style="color: #a11;">"left"</span>).<span style="color: #000;">offsetHeight</span>&gt;=<span style="color: #000;">$</span>(<span style="color: #a11;">"right"</span>).<span style="color: #000;">offsetHeight</span>){
		<span style="color: #000;">$</span>(<span style="color: #a11;">"right"</span>).<span style="color: #000;">style</span>.<span style="color: #000;">height</span>=<span style="color: #000;">$</span>(<span style="color: #a11;">"left"</span>).<span style="color: #000;">offsetHeight</span> + <span style="color: #a11;">"px"</span>;
	}
	<span style="color: #708;">else</span>{
		<span style="color: #000;">$</span>(<span style="color: #a11;">"left"</span>).<span style="color: #000;">style</span>.<span style="color: #000;">height</span>=<span style="color: #000;">$</span>(<span style="color: #a11;">"right"</span>).<span style="color: #000;">offsetHeight</span> + <span style="color: #a11;">"px"</span>;
	}	
}
<span style="color: #000;">window</span>.<span style="color: #000;">onload</span> = <span style="color: #708;">function</span>() {
	<span style="color: #000;">getHeight</span>();
}</pre>
<p>经测试，该代码有效。</p>
<p>效果请看<a href="#" target="_blank">Demo</a>。</p>
<p>另外，在实际运用，可能还会存在由于左div或右div存在padding属性而导致上述取值变多或变少的问题。比如，最终赋值时发现left比right还高10px，那么也可以通过修改上述代码解决：</p>
<pre>$("left").style.height=$("right").offsetHeight-10 + "px";</pre>
<p>文章来源：http://twetw.com/1780.html 和http://twetw.com/1807.html</p>
<p>感谢端友【Aisin Von】的投稿！！</p>
<p>源: <a href="#" target="_blank">http://itwwt.com</a></p>
<p>转载请注明：<a href="#">大前端</a> &raquo; <a href="#">如何让2个并列的div根据内容自动保持同等高度</a></p>		