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

Answer 1

您可以为此使用CSS，而无需JS。

您需要确保先将HTML和主体设置为100％的宽度和高度。 见下文：

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

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

只要#lordly是身体的直接子代，这将起作用。

同样值得注意的是，您应该删除HTML和主体上的边距和内边距，以确保跨浏览器兼容

编辑：为了完整起见，与您的JS有关的问题是您的jQuery选择器正在寻找#lordy，因为您的ID实际上很重要-您丢失了'l'