Jquery make a div full width and height of page and responsive

Question

I am trying to make a div the full width and height of a browser window, here is the code I have. It doesnt work.

jQuery:

<script type="text/javascript">
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();

    $('#lordy').css('height', viewportHeight + 'px');
    $('#lordy').css('width', viewportWidth + 'px');

    $(window).resize(function() {
        var viewportWidth = $(window).width();
        var viewportHeight = $(window).height();

        $('#lordy').css('height', viewportHeight + 'px');
        $('#lordy').css('width', viewportWidth + 'px');
    });

HTML

<div id="lordly"></div>

CSS

#lordly { 
    background-color: #CB0011;
}

Answer 1

You can just use CSS for this, no need for JS.

You need to make sure you have set HTML and body to 100% width and height first. see below:

html,
body {
    width: 100%;
    height: 100%;
}

#lordly {
   width: 100%;
   height: 100%;
}

As long as #lordly is a direct child of body this will work.

also worth noting you should remove margin and padding on html and body to ensure cross browser compatibility

Edit: For completeness, the issue with your JS is that your jQuery selector is looking for #lordy where as your Id is actually lordly - you are missing the 'l'