jQuery css高度不适用

Question

由于某些原因，在这段代码中没有设置高度

jQuery(document).ready(function() {

            jQuery('#main-content').css({'height': ((jQuery(window).height()))+'px'})
            jQuery('#nav-icons a').click(function(){
            jQuery('#nav-icons a').removeClass("active-icon");
            jQuery(this).addClass( "active-icon" );
            var toLoad = jQuery(this).attr('href')+' #main-content';
            var toLoadSlider = jQuery(this).attr('href')+' #homepage-slider';
            jQuery('#main-content , #homepage-slider').fadeOut(1000, loadContent);
            function loadContent() {
                jQuery('#homepage-slider').empty().load(toLoadSlider) 
                jQuery('#main-content').empty().load(toLoad,'',showNewContent()) 
            }
            function showNewContent() {
                jQuery('#main-content , #homepage-slider').css({'height': ((jQuery(window).height()))+'px'}).hide().fadeIn(2000).removeAttr('id class');
            } 
            return false; 

有趣的是，showNewContent()中的同一行代码设置了高度

Answer 1

唯一合乎逻辑的原因是第一行中的jQuery('#main-content')不是您选择的DOM元素的实际jQuery对象表示。

你必须自己弄清楚为什么事情会这样。

Answer 2

假设你有

<div id="main-content">
  ... content
</div><!--main-content-->

这个应该能奏效:

var windowHeight = jQuery(window).height();
jQuery(document).ready(function ($) {
    $('#main-content').css({
        height: windowHeight
    });
    // other scripts
}); // ready

JSFIDDLE