Question

我试图制作一个全屏菜单，然后我设法获得width: 100%;和min-height: 100%;的阻止。现在我的页面有点长，所以当我向下滚动时，我看到全屏菜单，不适用于页面的其余部分。

nav阻止位于container

之外

<nav id="site-nav" class="clearfix" style="display: block;">
<div class="menu-wrap">
    <ul id="menu-main-menu" class="menu">
        <li id="menu-item-44" class="menu-item current_page_item menu-item-home"><a href="#">Home</a></li>
        <li id="menu-item-18" class="menu-item"><a href="#">UI/UX Designer</a></li>
        <li id="menu-item-21" class="menu-item"><a href="#">Front-End DEV</a></li>
        <li id="menu-item-25" class="menu-item"><a href="#">Contact</a></li>
    </ul>
</div>
<!-- end .menu-wrap -->

CSS：

#site-nav {
    display: none;
    background: rgba(34, 34, 34, 1);
    position: absolute;
    z-index: 1;
    width: 100%;
    min-height: 100%;
    top: 0px;
}

触发此菜单时是否有办法禁用滚动？还是一些CSS技巧？

注意：作为最终结果，只有当菜单块被触发时，我才希望身体为100％。有什么解决方案吗？

Answer 1

禁用滚动的最简单方法是在不应包含滚动的元素上使用overflow: hidden;（它可以是body标签）。

但在这种情况下，我建议设置position: fixed;而不是绝对，而且菜单将始终为全屏（但不会隐藏滚动条）。这是完全最简单的方法，并且不会导致overflow:hidden;和max-width: 100%;的身体出现问题。

Answer 2

将body，html max-height设置为100％，并设置overflow：hidden;

HTML：

<nav id="site-nav" class="clearfix" style="display: block;">
<div class="menu-wrap">
    <ul id="menu-main-menu" class="menu">
        <li id="menu-item-44" class="menu-item current_page_item menu-item-home"><a href="#">Home</a></li>
        <li id="menu-item-18" class="menu-item"><a href="#">UI/UX Designer</a></li>
        <li id="menu-item-21" class="menu-item"><a href="#">Front-End DEV</a></li>
        <li id="menu-item-25" class="menu-item"><a href="#">Contact</a></li>
    </ul>
</div>
<!-- end .menu-wrap -->

CSS：

body,html {
    overflow: hidden;
    max-height: 100%;
}
#site-nav {
    display: none;
    background: rgba(34, 34, 34, 1);
    position: absolute;
    z-index: 1;
    width: 100%;
    min-height: 100%;
    top: 0px;
}

触发菜单时禁用滚动

2 个答案: