基於其他元素的高度的最大高度

Question

我希望能夠根據另一個元素的（可變）高度來設置一個元素的最大高度-盡管我是一個JS初學者，但我很肯定，有一種方法可以做到這一點。 the parent element I want to base the max-height on. 這我要基於max-height的父元素。 顯然，無論元素在任何給定時間在任何給定頁面上的高度如何，我都希望此解決方案能夠起作用。

為了清楚起見，我想找到一個類為“ ElementOne”的元素的高度，然后將“ ElementTwo”的最大高度設置為，例如，ElementOne的高度加113px。

我該怎么做呢？

Answer 1

我使用Paul Irish的這段代碼來做到這一點：

$.fn.setAllToMaxHeight = function(){
  return this.height( Math.max.apply(this, $.map( this , function(e){ return $(e).height() }) ) );
}

// usage: $(‘div.unevenheights’).setAllToMaxHeight()

Answer 2

我認為那是您的意思：

var h = document.getElementById("ElementOne").style.height;

document.getElementById("ElementTwo").style.maxHeight = h + 113 + "px";

Answer 3

這使用jquery將事件偵聽器分配給窗口和ELementOne的resize事件（注意：我認為大多數html觸發器都不具有自己的resize事件）。 這是一個jsfiddle： http : //jsfiddle.net/xiondark2008/UPqsV/

我為div添加顏色，以便您可以看到它們。

HTML：

<div class="ElementOne"></div>
<div class="ElementTwo"></div>

JavaScript的：

function setHeight(){
    var elementOne = $(".ElementOne").height();
    $(".ElementTwo").height( elementOne +113);
}

$(window,".ElementOne").resize(setHeight);
setHeight();