.css() jquery not working properly

Question

I'm attempting to apply the height of window to the max-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, the my website is loaded: the max-height isn't applied. The result in the console is when the website is loaded is:

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 comes in mind is that at time you call your snippet on document ready pseudo event, your element(s) .wordboard doesn't exist in the DOM. You are surely (or a plugin) adding it dynamically.

EDIT: just check it:

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

If displaying 0, you know from where comes from your issue.