調整高度時不會重新計算Div高度

Question

當我刷新頁面時，它可以完美工作，但是當我調整頁面大小時，它不會重新計算div的高度。

JSFIDDLE

$(document).ready(function() {
    var selectorsArray = ['home', 'about', 'portfolio', 'contact'];
    responsiveResize(selectorsArray);  
$(window).resize(function(){
    var selectorsArray = ['home', 'about', 'portfolio', 'contact'];
    responsiveResize(selectorsArray);  
});
});


function responsiveResize(selectorsArray){
    $.each(selectorsArray, function( index, value ) {
        var cntcnter = $('#'+value+' .content-container');
        var height = $('#'+value+' .content-container').height();
        console.log(height);
        cntcnter.css({'height': height+'px', 'margin-top': '-'+(height/2) +'px'});
    });
}

Answer 1

它不起作用的原因是因為在第一次運行時，您為容器設置了height 。 在第二次運行中，已經設置了height因此它始終是相同的值。 如果文本溢出容器，則在這種情況下不會影響新高度。

如果要繼續使用代碼，則需要清除/刪除上一次運行中添加的height 。

你可以用這個

var height = $('#'+value+' .content-container').css('height', '').height();

就像Chris Empx提到的那樣，使用CSS可以輕松實現。

另外，您可以優化像這樣的小提琴

Answer 2

我想知道為什么要用jquery做到這一點。 我會在CSS中做到這一點。

像那樣

<div class='container'>
   <div class='column col 12'>
       <p>Your Inputs here</p>
   </div>
<div class='clear'></div>
</div>

然后在CSS

    .container {
         margin: 0 auto;
         width: 960px;
    }
    .col-12{
         width: 100%;
    }
.clear {clear: both;}
.column {padding: 0 .8em; float:left;}

col-6將為width：50％col-3將為width：25％