固定定位菜单在窗口尺寸不足时被截断的解决方案咨询

问题描述 #

我一直想解决这个问题：我有一个fixed定位的汉堡菜单，点击展开后，当窗口尺寸小于菜单内容高度时，部分菜单会被截断。试过设置overflow: scroll但没效果，而且双滚动条的体验很差。

相关代码 #

HTML结构 #

<div id="container-menu">
    <div id="menuinhalt">
        <div id="menu"><jdoc:include type="modules" name="menu" /></div>
        <div id="gesucht-aufklappen">Häufig gesucht</div>
        <div id="gesucht"><jdoc:include type="modules" name="gesucht" style="html5" /></div>
    </div>
    <div id="about">
        <div id="menu-about"><jdoc:include type="modules" name="menu-about" /></div>
        <div id="submenu-about"><jdoc:include type="modules" name="submenu-about" /></div>
        <div id="socialmedia"><jdoc:include type="modules" name="socialmedia" /></div>
    </div>
</div>

现有CSS #

#container-menu { 
    display: none; 
    background: #00436e; 
    position: fixed; 
    z-index: 999; 
    left: 0px; 
    right: 0px; 
}

解决方案 #

问题根源是fixed定位的容器未限制高度，内容撑开容器后超出视口，导致overflow属性无法生效。按以下方式修改即可解决：

1. 限制菜单容器高度并开启内部滚动
   给#container-menu添加高度约束和纵向滚动属性，确保容器高度不超过视口，超出内容仅在容器内滚动：

   #container-menu { 
       display: none; 
       background: #00436e; 
       position: fixed; 
       z-index: 999; 
       left: 0; 
       right: 0;
       top: 0;
       bottom: 0;
       overflow-y: auto;
   }
   

   也可以用height: 100vh替代top: 0; bottom: 0;，实现相同效果。

2. 禁止页面背景滚动（可选）
   菜单展开时给<body>添加类，禁止页面滚动，彻底避免双滚动条：

   body.menu-open {
       overflow: hidden;
   }
   

   配合JS在汉堡按钮点击时切换类：

   const hamburgerBtn = document.querySelector('#hamburger-btn');
   const containerMenu = document.querySelector('#container-menu');
   const body = document.body;
   
   hamburgerBtn.addEventListener('click', () => {
       containerMenu.style.display = containerMenu.style.display === 'block' ? 'none' : 'block';
       body.classList.toggle('menu-open');
   });
   

修改后，菜单内容超出视口时仅在菜单容器内显示滚动条，既不会截断内容，也不会出现双滚动条的问题。

内容的提问来源于stack exchange，提问作者Colette Admotion