jQuery：在窗口調整兩個div的高度相同的高度

Question

我知道這已被問了幾次，我從這裏提出的問題之一得到了解決方案。它在頁面加載時工作得很好，但我無法工作的是在窗口調整大小。 div保持相同的高度，導致內容溢出。

$(document).ready(function(){ 

    function setboxHeight(){ 
    var box1height = $('.box1').height(); 
    var box2height = $('.box2').height();  
    box1height>box2height ? ($('.box2').height(box1height)):($('.box1').height(box2height));  
    } 

    setboxHeight(); 

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

}); 

這裏是小提琴：http://jsfiddle.net/fbthuemc/

Answer 1

請問這是你想要的是什麼？

function setboxHeight(){ 
     $('.box1, .box2').css('height', ''); 
     ... 
    } 

現在看起來它可以在調整窗口大小時重置box1的高度。 http://jsfiddle.net/fbthuemc/3/

順便說一句，我通常使用console.log()觀察元素的高度數等

Answer 2

不知道你想做什麼。避免溢出？如果是這樣，你可以設置它們的overflow: hidden。 或顯示y滾動條overflow-y: auto; overflow-x: hidden;（或反轉）。

你也可以設置height: 100% !important;強制它。您也可以使用：word-wrap: break-word;來避免單詞超出保證金範圍。

你可以做的其他事情是設置min-height和/或max-height，這樣就不會出現意想不到的視覺問題。

希望有幫助！

Answer 3

我想這是你以後的樣子。

http://jsfiddle.net/7r1ekt9x/

$(document).ready(function() { 
    function setboxHeight() { 
    // Get the height of box1 
    var box1height = $('.box1').height(); 
    // Set box2 height equal to box1 
    $('.box2').height(box1height) 
    } 

    setboxHeight(); 

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