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

Answer 1

您只需使用 CSS 即可，无需使用 JS。

您需要确保首先将 HTML 和正文设置为 100% 宽度和高度。见下文:

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

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

只要 #lordly 是 body 的直接子级，这就可以工作。

还值得注意的是，您应该删除 html 和 body 上的边距和填充，以确保跨浏览器兼容性

编辑:为了完整起见，您的 JS 的问题是您的 jQuery 选择器正在寻找 #lordy，而您的 Id 实际上是 lordly - 您缺少“l”