javascript - .css() jquery not working properly -

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

initial window height: 550 script.js:28 initial max height of $('.wordboard'):  undefined (after resize window, effect apply. however, want apply window 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 

the solution comes in mind @ time call snippet on document ready pseudo event, element(s) .wordboard doesn't exist in dom. surely (or plugin) adding dynamically.

edit: check it:

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

if displaying 0, know comes issue.