要求在頁面加載時將div設置爲其高度的最大值

Question

客戶端正在使用內容管理系統將文本注入到代表按鈕的2個div中。我希望按鈕的高度相等。問題是：

• 如果我一套等於兩個使用CSS的高度，那麼，只有當客戶端不輸入太多的文字作品。
• 如果我沒有使用CSS設置高度，那麼只有當客戶端在兩個文本中輸入相同行數的文本時才起作用。

所以我認爲JQuery將在這一個來救援。你能幫我弄清楚使用哪些函數嗎？

問題的概要是：

<div id="button1"> 
    <p>Here's some text that the client will control.</p> 
</div> 
<div id="button2"> 
    <p>Here's some more text that the client will control</p> 
</div> 

<script type="text/javascript"> 
    /* Here will go some JS to make button1 and button2 the height of whichever one is taller when the page has loaded the client's text that the CMS injected */ 
</script> 

Answer 1

沒有JQuery的...讓他們display: table-cell元素，他們將彼此的高度自動匹配...

#button1, #button2 { 
 
    display: table-cell; 
 
    width: 50%; 
 
    border: 1px solid red; 
 
}

<div id="button1"> 
 
    <p>Here's some text that the client will control.</p> 
 
</div> 
 
<div id="button2"> 
 
    <p>Here's some more text that the client will control Here's some more text that the client will control Here's some more text that the client will control Here's some more text that the client will control</p> 
 
</div>

Answer 2

jQuery解決方案

http://jsfiddle.net/OxyDesign/hyo0zsfj/

HTML

<div class="button" id="button1"> 
    <p>Here's some text that the client will control.</p> 
</div> 
<div class="button" id="button2"> 
    <p>Here's some more text that the client will control</p> 
    <p>Here's some more text that the client will control</p> 
    <p>Here's some more text that the client will control</p> 
    <p>Here's some more text that the client will control</p> 
    <p>Here's some more text that the client will control</p> 
    <p>Here's some more text that the client will control</p> 
</div> 
<div class="button" id="button3"> 
    <p>Here's some more text that the client will control</p> 
    <p>Here's some more text that the client will control</p> 
    <p>Here's some more text that the client will control</p> 
</div> 

JS

$(document).ready(function(){ 
    var buttons = $('.button'), 
     btnsLgth = buttons.length, 
     biggerHeight = 0; 

    for(var i = 0; i < btnsLgth; i++){ 
     var btnHeight = buttons.eq(i).height(); 
     if(btnHeight > biggerHeight) biggerHeight = btnHeight; 
    } 
    buttons.height(biggerHeight); 
}); 

Answer 3

例如，您可以採取的最大高度，並將其應用到兩個，下面一個簡單的jQuery解決方案：

$(document).ready(function(){ 
// wait until the document is ready 
// 1 : grab the default height of the two divs 
var button1Height = $('#button1').css('height'); // example 50px 
var button2Height = $('#button2').css('height'); // example 60px 

// 2: we have to remove the suffix px and we can achieve this by using replace method 
button1Height = button1Height.replace('px',''); // now the value is 50 
button2Height = button2Height.replace('px',''); // now the value is 60 

//3: now choose the max between the two heights and make it the height of both 

if(button1Height >= button2Height){ 
$('#button2').css('height',button1Height+'px'); 

}else{ 
$('#button1').css('height',button2Height+'px'); 
} 

// now #button1 and #button2 should have the same height 
button1NewHeight = $('#button1').css('height'); 
button2NewHeight = $('#button2').css('height'); 

// you should get button1NewHeiht == button2NewHeight 

});