如何讓2個並列的div根據內容自動保持同等高度

 有左右2個並列的div，2個div都不能限定高度。左div爲導航，右div爲內容。如何能讓左div塊自動得到和右div塊相等的高度？

同時，也有網友提問到「若是右塊高度比左塊低，會不會致使左塊的內容被溢出不顯示之類的問題。應該是取左右2者的最高值吧來對齊吧」。

的確應該是哪一個div Height值大，就將其值賦給Height值小的div，從而使2個div高度始終保持一致。看代碼：

function $(id){ return document.getElementById(id) } function getHeight() { if ($("left").offsetHeight>=$("right").offsetHeight){ $("right").style.height=$("left").offsetHeight + "px"; } else{ $("left").style.height=$("right").offsetHeight + "px"; } } window.onload = function() { getHeight(); }

經測試，該代碼有效。

效果請看Demo。

另外，在實際運用，可能還會存在因爲左div或右div存在padding屬性而致使上述取值變多或變少的問題。好比，最終賦值時發現left比right還高10px，那麼也能夠經過修改上述代碼解決：

$("left").style.height=$("right").offsetHeight-10 + "px";