JQuery 仅检测初始高度答案

【问题标题】：JQuery detects initial height onlyJQuery 仅检测初始高度
【发布时间】：2015-05-07 03:33:56
【问题描述】：

我已经建立了一个带有大背景图片的主页模板。以下 JQuery 检测视口高度并将带有内联 CSS 的 min-height 应用于 .background 类。

// Set viewport height on .background - https://j.eremy.net/set-element-height-to-viewport/
function setHeight() {
    windowHeight = $(window).innerHeight();
    $('.background').css('min-height', windowHeight);
};
setHeight();
    $(window).resize(function() {
    setHeight();
});

这就像一个魅力。但是，我有智能手机的问题。当我展开移动导航时，下面的标题不会向下移动。这是因为 JQuery 只在页面加载时检测高度。

有没有一种方法可以使 JQuery 动态化，以便检测扩展导航等变化？

【问题讨论】：

您的 jQuery 实际上已设置为在视口宽度/高度发生变化时重置 .background 元素的高度，但在打开移动导航时您不会更改视口高度/宽度.在计算min-height 时，您也没有考虑移动导航。另外，你不能用min-height:100%而不是JS吗？还有基于视口高度和宽度的 CSS vh 和 vw 单位。
感谢您的反馈好友。我没有使用 min-height 因为这需要在旧版浏览器中工作。
什么？你的 JS 除了设置min-height 什么都不做。 min-height 支持回到 IE7 顺便说一句：caniuse.com/#search=min-height
我需要支持 IE7 ;)
不客气。 caniuse.com 网站是一个很好的资源，可以了解不同浏览器所支持的内容。功能描述下方有一个“显示全部”按钮，将显示旧浏览器的支持。

标签： jquery css

【解决方案1】：

每当您想更新背景高度时，只需使用$(window).trigger('resize')。

初始化代码：

$(window).on('resize', function (){

    $('.background').css('min-height', $(window).innerHeight());
});

$(document).ready(function (){

    $(window).trigger('resize');
});

【讨论】：