求助：如何实现WordPress站点移动端全屏菜单占满视口高度

既然你用的是WordPress主题没法直接贴代码，那咱们就通过自定义CSS来搞定——这是WordPress里调整主题样式最常用的方式，你可以在后台「外观」→「自定义」→「额外CSS」里添加下面的代码试试。

我给你整理了几种针对性的方案，你可以依次尝试：

方案1：直接给汉堡菜单容器设置视口高度 #

首先得找到汉堡菜单的主容器类名（比如.mobile-menu、.hamburger-menu、.offcanvas-menu这类，你可以用浏览器的「检查元素」工具：右键点击打开的汉堡菜单，选「检查」就能找到它的class），然后添加：

@media (max-width: 768px) { /* 这个断点对应平板/移动端，可根据你的主题调整数值 */
  .你的汉堡菜单容器类名 {
    height: 100vh; /* 强制占满整个视口高度 */
    min-height: 100vh; /* 确保菜单内容不够时也撑满高度 */
    margin: 0;
    padding: 0;
  }
}

方案2：处理父元素的高度限制 #

有时候菜单的父容器（比如网站头部.site-header）可能设置了固定高度，导致子菜单没法撑满视口，这时候得同时调整父元素：

@media (max-width: 768px) {
  .汉堡菜单的父容器类名 {
    height: 100vh;
    position: relative; /* 确保子菜单的定位不会跑偏 */
  }
  .你的汉堡菜单容器类名 {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}

方案3：处理菜单内容溢出的情况 #

如果菜单选项太多，内容会超出视口，这时候可以让菜单内部滚动，同时容器保持满高度：

@media (max-width: 768px) {
  .你的汉堡菜单容器类名 {
    height: 100vh;
    overflow-y: auto; /* 内容超出时显示垂直滚动条 */
    box-sizing: border-box; /* 避免内边距把菜单高度撑大 */
  }
}

小提示：样式优先级问题 #

如果上面的代码没生效，可能是主题自带的样式优先级更高，你可以在属性后面加!important强制生效（比如height: 100vh !important;）——不过这是最后的办法，尽量优先不用，避免影响其他元素的样式。

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