jQuery css height not applying

Question

For some reason the height is not being set in this piece of code

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; 

interestingly, the exact same line of code in the showNewContent() does set the height.

Answer 1

The only logical reason for this is that jQuery('#main-content') in your first line is not the actual jQuery object representation of the DOM element of your choice.

You will have to figure that out yourself as to why things turn out this way.

Answer 2

Assuming that you have

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

This should do the trick :

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

JSFIDDLE