使用 Jquery 设置最小高度以避免移动问题

Question

我不知道这是否可行，但我希望更改此工作功能，以便将“.nav_menu”div 的高度设置为视口的一半，而不是设置最小高度。

var menu = jQuery(".nav_menu");
  jQuery(window).resize("resizeMenu");
  function resizeMenu() {
    menu.height(jQuery(window).height() / 2);
  }
resizeMenu();

现在我不想做这样的事情的原因......

$('.nav_menu').css("min-height", "50vh");

或者直接在 css 中执行此操作，是因为地址栏隐藏时在移动设备上会出现高度重新计算问题。上面的函数绕过了这个问题，但设置为使用高度，而不是最小高度。

最终我的目标是能够使用 VH 或 % 单位值作为元素的最小高度，而不会在 android 上产生当您从顶部滚动并且浏览器地址栏隐藏时会重新计算视口大小，从而改变 % 或 VH 单位的输出值。因此，非常感谢任何解决方案！

Answer 1

在函数中进行检查会解决问题吗？这就是为什么除非需要才设置元素的高度，这基本上是 min-height 样式所做的。类似的东西：

var menu = jQuery(".nav_menu");
jQuery(window).resize("resizeMenu");
function resizeMenu() {
    var windowHeight = jQuery(window).height();
    if (menu.height < windowHeight / 2){
        menu.height( windowHeight / 2);
    }
}
resizeMenu();