我正在尝试使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;
}
最佳答案
您可以为此使用CSS,而无需JS。
您需要确保先将HTML和主体设置为100%的宽度和高度。见下文:
html,
body {
width: 100%;
height: 100%;
}
#lordly {
width: 100%;
height: 100%;
}
只要#lordly是身体的直接子代,这将起作用。
同样值得注意的是,您应该删除HTML和主体上的边距和内边距,以确保跨浏览器兼容
编辑:为了完整起见,与您的JS有关的问题是您的jQuery选择器正在寻找#lordy,因为您的ID实际上很重要-您丢失了'l'
关于javascript - jQuery使div的页面全高和全高并响应,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19089142/