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