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 和 body 设置为 100% 的宽度和高度。见下文：

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

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

只要#lordly 是 body 的直接孩子，这将起作用。

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

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