Question

刷新页面时效果很好，但是当我调整大小时，它不会重新计算div高度。

$(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很容易获得。

此外，您可以优化代码this fiddle

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宽度：50％ col-3的宽度为：25％

调整大小时不会重新计算Div高度

2 个答案: