Stellen Sie Min Height mit Jquery ein, um das Problem zu vermeiden

Question

Ich weiß nicht, ob das möglich ist, aber ich möchte diese Arbeitsfunktion ändern, anstatt die Höhe meines ".nav_menu" -Divs auf die Hälfte des Darstellungsbereichs zu setzen, Es legt die Mindesthöhe fest.

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

Nun der Grund, ich will nicht, etwas zu tun ...

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

Oder nur, dass direkt in css, wegen der Höhe neu zu berechnen Problem ist, das sich auf mobilen präsentiert wenn die Adressleiste ausgeblendet wird. Die obige Funktion umgeht dieses Problem, ist aber so eingestellt, dass sie mit der Höhe und nicht mit der Mindesthöhe arbeitet.

Letztendlich ist mein Ziel, in der Lage zu sein, den VH- oder% -Einheitswert für die minimale Höhe eines Elements zu verwenden, ohne das Problem auf Android zu verursachen, dass, wenn Sie von oben blättern und die Adressleiste des Browsers verbirgt es neu berechnet die Größe des Darstellungsbereichs, wodurch der Ausgabewert einer% - oder VH-Einheit geändert wird. Also jede Lösung dafür wird sehr geschätzt!

Answer 1

Würde eine Überprüfung innerhalb der Funktion das Problem lösen? Das ist der Grund, warum Sie die Höhe des Elements nicht festlegen, es sei denn, es wird benötigt, was im Grunde der Stil ist, der der min-height-Stil tut. Etwas wie:

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();