移动导航栏,无论内容如何,​​窗口高度均为100%

Question

我有一个页面的移动版本.内容足以让用户在他的移动设备上滚动.当点击移动导航栏从左侧滑入和图标body得到overflow: hidden;这样的内容已经不滚动.有没有办法使导航栏100%高度的窗口(而不是文档),以便用户可以进一步滚动导航栏？滑入和导航高度由Javascript控制,但我正在寻找CSS解决方案.有人可以帮忙吗？

// CSS
#mobile_nav {
    width: 300px;
    position: fixed;
    top: 0;
    left: -300px;
    z-index: 10000;
    overflow: auto;
}

// JS
jQuery("#mobile_button").on("click", function() {
    jQuery("#mobile_nav")
        .css({ height: jQuery(window).height() });
        .stop(true)
        .animate({ left: 0 })
    ;
    jQuery("body").css({ overflow: "hidden" });
});

Answer 1

您可以像这样使用Viewport单位:

    height: 100vh;

您可以在此处查看此css属性的浏览器支持.