確保元素高度相等

我遇到了兩個相鄰div「列」的問題。這是一種常見的用例，其中一個可能比另一個高得多，這可能是一個可用性問題，因爲用戶將項目從一個div拖放到另一個div。確保元素高度相等

使用jQuery，我想確保這兩列總是相等的高度。不僅僅是在頁面加載時，而且如果它們的內部內容發生了變化，或者它們使用jQuery進行動畫製作，或者頁面被調整大小或任何其他可能的原因，更高的div的高度發生變化，則另一個會隨之而來。

實現此目的最快的處理方式是什麼？（我想在窗口調整大小重繪最小延遲）

非常感謝提前！

2011-12-18 Emphram Stavanger

下面是一個插件，也適用於響應式佈局：https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows – Sam152 2014-03-09 09:00:28

<div class="same_height_kids"><div>foo></div><div>bar</div></div> 

$('.same_height_kids').bind('DOMSubtreeModified change', function(e){ 
    var min = 0; 
    $(e.currentTarget).children().each(function(i, e){ 
    $(e).css({minHeight: 0}); 
    if($(e).height() > min){ 
     min = $(e).height(); 
    } 
    }); 
    $(e.currentTarget).css({minHeight: min}); 
    $(e.currentTarget).children().each(function(i, e){ 
    $(e).css({minHeight: min}); 
    }); 
});

這是未測試的代碼。 DOMSubtreeModified事件不受IE 9以前的版本支持，也不受Opera的支持。就像我知道的onChange事件，而不是在一些瀏覽器中。 onResize通常只在窗口和框架上使用。

這個實現有divs不能變小的缺陷。因此您必須在計算新高度之前移除最小高度。

編輯：更新的代碼。 http://jsfiddle.net/ADY3F/5/

來源

2011-12-18 16:26:00 Christian

<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> 
    <script type="text/javascript"> 
      $(document).ready(function(){ 
       setInterval(checkSizes, 1000); 
      }); 

      $(window).resize(function(){ 
       checkSizes(); 
      }); 


      function checkSizes(){ 
       if($("#myDiv1").height() != $("#myDiv2").height()){ 
        console.log("Sizes do not match"); 
        alert("Sizes do not match"); 
       } 
      } 
    </script> 
</head> 
<body> 
    <div id="myDiv1"> 
     test 
    </div> 
    <div id="myDiv2"> 
     test<br /> 
     test 
    </div> 
</body> 
</html>

這個例子每秒檢查一次，並在窗口每次調整大小時檢查。如果它們不匹配。它會在消息框和控制檯中提醒你。

使用CSS，您還可以設置div的最大高度。它會夾住任何多餘的東西。

max-height:50px;

來源

2011-12-18 15:21:18 John

就像我對TheDeeno說的，我需要一種方法來圖哪個div是最乾淨的方式。我將來也可能需要這種實現方式來處理其他事情，所以對於要比較的div數目不可知的解決方案將是肉汁。 – 2011-12-18 16:35:02

你可以綁定到resize事件上的所有匹配的div然後在回調只是設置其高度=給對方。下面是下面的一個fiddle：

$(document).on("resize", ".selector", function() { 
    var max = function(array){ return Math.max.apply(Math, array); } 
    var heights = $(".selector").map(function() { return $(this).height() }).get(); 
    $(".selector").height(max(heights)); 
});

處理程序上面包含3個步驟：

創建一個函數從任何陣列搶最大值
找到所有的高度，並把它們放在一個數組
最後將每個元素的高度設置爲最大值。

來源

2011-12-18 15:25:28

這會很棒，但它似乎應用了第一個.my_selector的高度，而不是最高的。通常（但並非總是）正確的列將會更高，所以我需要一個選擇器來選擇實際上最高的那個。任何干淨的方式來實現呢？ – 2011-12-18 16:24:41

我的錯誤。是的，有一個乾淨的方式 - 只需要兩個步驟。答案已更新。 – 2011-12-18 17:00:43

如果您不需要支持比v8更早的IE，那麼CSS可以通過display:table-cell爲您做到。

來源

2011-12-18 15:32:40 Kornel

這確實跨過了我的想法，但不幸的是我確實需要支持IE7。 :-( – 2011-12-18 16:22:55

確保元素高度相等

回答

相關問題