Javascript 动态高度调整

我有两个盒子，像：

<div class="box">
    <div class="content">Here goes content 1.</div>
</div>
<div class="box">
    <div class="content">Here goes content 2.</div>
</div>


.content {height:150px;width:65px;}

这里是内容1。
这里是内容2。
.content{高度：150px；宽度：65px；}

现在，内容1的文本可能不适合150px的高度。潜水艇伸展着。

---

如何实现类更改高度以使第二个内容与第1个内容具有相同的高度？

将它们放在父DIV中，并使第二个内容的高度自动调整。

这感觉不太优雅，但它可以工作（至少在Mac的FF、Chrome和Safari中，因为我没有时间在IE中测试它）：

window.onload=函数（）{
var minHeight=150；
var contentDivs=[]；
var divs=document.getElementsByTagName（“div”）；
//查找具有最高高度的内容div
对于（变量i=0；i

---

不要忘记从css中删除

高度：150px

，否则元素的高度将不会被调整。

嗨，这将是一个好主意，但不幸的是，由于结构本身的原因，我无法更改任何html结构。你可以使用JQuery还是必须依赖纯javascript？不幸的是，我不能使用JQuery…嗨，谢谢你的帖子。我看看我能用它做些什么

<script type="text/javascript">
   window.onload = function() {
       var minHeight = 150;
       var contentDivs = [];
       var divs = document.getElementsByTagName("div");

       // find the content div with the tallest height
       for (var i=0; i < divs.length; i++) {
          var div = divs[i];
          if (div.className == "content") {
             minHeight = Math.max(minHeight, div.offsetHeight);
             contentDivs.push(div);
          }
       }

       // set the content divs' height to the tallest height
       for (var j=0; j < contentDivs.length; j++) {
          var contentDiv = contentDivs[j];
          contentDiv.style.height = minHeight + "px";
       }
   }
</script>

.content {width:65px;}