javascript - Jqueryはdivをページの全幅と高さでレスポンシブにします

Question

私はdivをブラウザウィンドウの全幅と高さにしようとしています.これが私が持っているコードです. うまくいきません。

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;
}