Question

我正在开发一个网站，对jquery来说相当新。出于某种原因，当我在一个div上使用.css（）函数时，它不会改变高度。它适用于另一个div而不是这个。这是该网站的链接：

http://dev.djrefine.com/epic/index111.html

要激活相关功能，请单击灰色框打开任何文章，然后单击右上角的白色“关闭”框。

并且有问题的代码在第506行，这是此代码段中的第六行：

        var $wWidth = $(window).width();
        var $wHeight = $(window).height();

        var $newheight = Math.round($wHeight * 0.8 - 200) + 'px';

        $('#container').css('height',$newheight);

        $('#theThing').html($newheight);
        $('#thisThing').html($('#container').css('height'));

        $('#makeMeScrollable').css({'height':$wHeight * 0.8 - 200,'width':$wWidth - 260});

div #makeMeScrollable正在正确调整其css，但#container div不是。

div #theThing和#thisThing只显示$ newheight是正确的数字，但容器高度未设置为等于该数字，正如您在演示页面中看到的那样

我也尝试过$ newheight而不是四舍五入，最后没有添加'px'，以及我能想到的所有其他变体......

Answer 1

找到修复程序..

    setTimeout(function(){
        $('#container').css('height',$newheight);
        $('#thisThing').html($('#container').css('height'));
        $container.isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });
        $container.isotope( 'reLayout' );
        }, 0);

感谢Alex Sexton在这篇文章中的回答：

recalculate element height in jQuery after class change

它基本上会延迟超时0秒内的东西，但是在那里强制它会迫使它们等到函数的其余部分完成。我不知道为什么它是必要的，但它有效。

Jquery .css没有将高度属性应用于div

1 个答案: