Question

所以我试图让一个div覆盖100％的窗口高度这很简单，但是当浏览器调整大小时我不希望它调整大小。我不能使用固定高度，如 - height：900px，因为它将在浏览器和正在使用的设备之间有所不同。我试过使用以下jquery：

$(document).ready(function() {
    var screenHeight = $(window).height();
    $('#home').css('height', screenHeight + 'px');
});

这在一定程度上起作用，但问题是，如果在浏览器未全屏时访问该网站，它会将其设置为该高度，然后不会变大，我需要将其设置为高度如果浏览器最大化，浏览器是否可能？

到目前为止，您可以看到我的内容：http://zimxtrial.ukbigbuy.com/ - 尝试使用不同的浏览器高度刷新页面，然后调整大小以查看我的意思。

Answer 1

您可以使用screen.height或screen.availHeight（获取屏幕分辨率而不是浏览器视口）：

Example

Answer 2

使用$(window).resize只要浏览器高度发生变化，它就会更新选择器

试试这个

<script type='text/javascript'>

$(function(){
    var iniHeight = $(window).height();
    $('#home').css('height', iniHeight + 'px');
    $(window).resize(function(){
    var newHeight = $(window).height();
    $('#home').css('height', newHeight + 'px');
    });
});
</script>

Answer 3

尝试使用resize()之类的，

$(document).ready(function() {
    var screenHeight = $(window).height();
    $('#home').css('height', screenHeight + 'px');
    $(window).resize(function(){ // change home height on window resize event
       $('#home').css('height', $(this).height()+ 'px');
    });
});

固定高度为100％的Div

3 个答案: