Elements 100% of window size

I have a series of elements with the class of .box, I’d like each of them to be the same height as the window.

I had this working using this on a static html doc

        !function($, undefined) {
            var $win = $(window), 
                $body = $('html,body'), 
                $box = $('.box'), 
                $head = $('#head');

            function refresh() {
                var h = $win.height() - $head.height();

                if(Modernizr.touch) return;

                $box.css('min-height', h);
                $box.each(function() {
                    var $this = $(this);

                    $this.find('section').css('height', $this.outerHeight())
                })
            }


            $win.resize(function(e) {
                refresh()
            }).resize();


        }(jQuery)

However I’m trying to get this working in wordpress and its not working and i cant for the life of me work out why.