具有 100% 窗口高度的移动导航栏，无论内容如何

Mobile navbar with 100% window height regardless of content

本文关键字：窗口 100% 高度 导航 移动 具有      更新时间：2023-09-26

我有一个页面的移动版本。内容足以让用户在他的移动设备上滚动。单击图标时，移动导航栏会从左侧滑入，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" });
});

你可以像这样使用视口单位：

    height: 100vh;

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

相关文章：