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'