.css () jquery not working properly

Question

I am trying to apply the height of a window to the maximum height of a particular div.

$(document).ready(function(){
        console.log('Initial Window height:', $(window).height());
        $('.wordboard').css({ "max-height": ($(window).height()-150) + 'px' });
        //console.log($('.wordboard').css({"max-height": ($(window).height() - 150) + 'px'}));


        console.log("Initial max height of $('.wordboard'): ", $('.wordboard').css("max-height"));
        $(window).resize(function(){
            $('.wordboard').css({ "max-height": ($('body').height()-150) + 'px' });
            console.log("$('.wordboard').css('max-height')",$('.wordboard').css('max-height'));
        });

    });

However, my site is loaded: max-height is not applicable. The result on the console is loading the site:

Initial Window height: 550
script.js:28 Initial max height of $('.wordboard'):  undefined
(After i resize the window, the effect is now apply. However, I want to apply as soon as the window is loaded)

script.js:31 $('.wordboard').css('max-height') 718px
script.js:31 $('.wordboard').css('max-height') 723px
script.js:31 $('.wordboard').css('max-height') 728px
script.js:31 $('.wordboard').css('max-height') 733px

Answer 1

The only solution is that at the moment when you call your fragment on the pseudo-data of the document, your element .wordboarddoes not exist in the DOM. Of course, you (or the plugin) added it dynamically.

EDIT: just check it out:

$(function(){console.log($(".wordboard").length);});

If displayed 0, you know where your problem came from.

Answer 2

This is the right way.

$('.wordboard').css('max-height',"723px");

Answer 3

, resize.

. ( )

2 :

• resize:
  $(window).resize(function(){ [...] }).resize();
  , .resize() . !
• :
  $(window).resize(function(){ [...] }); $('.wordboard').css({ "max-height": ($('body').height()-150) + 'px' });