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和body上的边距和填充以确保跨浏览器兼容性

编辑：为了完整性，你的JS的问题是你的jQuery选择器正在寻找#lordy，因为你的Id实际上是高贵的 - 你错过了'l'

Jquery使页面的整个宽度和页面的高度和响应

1 个答案: