固定高度为 100% 的 Div答案

【问题标题】：Div with fixed height at 100%固定高度为 100% 的 Div
【发布时间】：2014-04-17 19:39:44
【问题描述】：

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

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

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

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

【问题讨论】：

请问为什么你需要一劳永逸的屏幕高度的DIV？对我来说似乎是一件奇怪的事情
对宽度使用自动属性我想这会有所帮助
@ChenAsraf 如果您查看此处的页面 - zimxtrial.ukbigbuy.com 您会看到我正在使用一个页面来满足我需要的所有内容，而不是从一个页面到另一个页面，您只需上下发送到部分，我需要将第一部分设置为 100% 高度，因为如果您调整浏览器高度的大小，第一部分中的图像对于我正在做的布局来说变得太小了，我需要图像高度与文本一起保持在 100%将在其之上添加。

标签： jquery css html browser height

【解决方案1】：

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

Example

【讨论】：

这是最好的答案。所有其他人都忽略了 OP 不希望屏幕与窗口一起调整大小的事实，只是最初
@ChenAsraf `如果在浏览器未全屏的情况下访问该站点，它会将其设置为该高度，然后不会变大`这行的含义是什么
请注意，screen 仅引用主屏幕，在使用多个屏幕时不一定是当前屏幕，并且存在一些问题，浏览器 chrome 等，这就是它几乎从未使用过的原因
@SridharR 表示使用 $(window).resize(...) 将在稍后调整窗口大小，并且 OP 希望它具有一个初始大小，就是这样
see this post, it should work with all major browsers。或you can test it here

【解决方案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>

【讨论】：

【解决方案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');
    });
});

【讨论】：