HTML移动端滑入式导航栏宽高不占满屏幕问题求解

问题原因与修复方案 #

1. 菜单高度未占满剩余屏幕

高度设置height:100%是相对父元素高度继承，你的.menu父元素未设置明确高度，无法正确计算高度值。
替换媒体查询内.menu的高度规则为视口高度计算值即可：

height: calc(100vh - 70px); /* 100vh为完整视口高度，减去顶部导航固定的70px高度 */

2. 菜单右侧存在留白

.menu的父元素ul.nav-links默认带margin-right:40px样式，绝对定位的.menu宽度继承了父元素的可用宽度，因此右侧缺失40px宽度。
在媒体查询内新增父元素样式清除边距：

.nav-links {
  margin: 0 !important;
  width: 100%;
  position: relative; /* 确保子元素绝对定位基于当前父元素 */
}

修改后的完整媒体查询参考 #

原有其他规则保留，仅新增/修改标注部分即可：

@media (max-width: 1000px) {
    /* 新增父元素样式 开始 */
    .nav-links {
        margin: 0 !important;
        width: 100%;
        position: relative;
    }
    /* 新增父元素样式 结束 */

    .menu {
        display: block;
        position: absolute;
        background-color: blue;
        /* 修改边距和高度 开始 */
        margin: 70px 0 0 0;
        height: calc(100vh - 70px);
        padding: 0;
        /* 修改边距和高度 结束 */
        text-align: left;
        width: 100%;
        transition: all 0.3s ease;
        left: -100%;
    }

    /* 原有其他媒体查询规则保持不变 */
    .icon{
        display: block;
        color: white;
        position: absolute;
        top: 0;
        right: 10px;
        line-height: 70px;
        cursor: pointer;
        font-size: 25px;
    }
    nav ul li,nav ul ul li{
        display: block;
        width: 100%;
        margin: 0px;
    }
    nav ul ul{
        top: 70px;
        border-top: 0px;
        float: none;
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
    }
    nav ul ul a{
        padding-left: 40px;
    }
    .show{
        display: block;
        color: white;
        font-size: 18px;
        padding: 0 20px;
        line-height: 70px;
        cursor: pointer;
    }
    .show:hover{
        color: white;
    }
    .show + a, nav ul ul{
        display: none;
    }
    [id^=btn]:checked + ul{
        display: block;
    }
    input[type=checkbox]:checked~.menu {
        left: 0%;
    }
}

补充提示：当前结构把div.menu直接放在ul标签内不符合HTML规范，ul的直接子元素只能是li，后续可调整结构避免潜在渲染异常。

内容的提问来源于stack exchange，提问作者A. Vreeswijk