使用position:fixed的下拉菜单无法滚动到底部链接问题求助

你的核心问题是导航区域的滚动行为未正确生效，以下是针对性修复方案：

调整后的CSS代码 #

主要优化导航栏的高度控制、滚动属性，并清除默认样式带来的溢出问题：

header {
    height: 60px;
    background-color: green;
}

body.nav-shown {
    overflow: hidden;
    margin: 0; /* 移除body默认边距，避免出现横向滚动条 */
}

body.nav-shown header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100; /* 确保header层级最高，不被遮挡 */
}

body.nav-shown nav {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0; /* 直接用bottom:0替代calc计算，精准占满header下方的所有视口空间 */
    background-color: black;
    color: white;
    font-size: 30px;
    line-height: 3em;
    overflow-y: auto; /* 仅在内容超出时显示垂直滚动条，比scroll更友好 */
    padding: 0;
}

body.nav-shown nav ul {
    margin: 0;
    padding: 0;
    list-style: none; /* 清除列表默认圆点样式 */
}

关键修改说明 #

• 用bottom: 0替代min-height: calc(100vh - 60px)：彻底避免计算误差导致的高度不足，确保导航区域完全填满header下方的视口空间。
• 替换overflow: scroll为overflow-y: auto：仅在内容超出时显示滚动条，优化视觉体验。
• 清除body、nav、ul的默认边距/内边距：避免默认样式导致内容超出导航区域，同时消除不必要的横向滚动条。
• 添加z-index:100：保证header在下拉导航展开时始终处于最上层。

修改完成后，极小视口下导航区域会自动出现垂直滚动条，可正常滚动查看所有列表项，同时body内容不会跟随滚动，完全满足你的需求。

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