垂直导航菜单无法适配视口问题排查求助

问题根源分析 #

你的导航菜单（.header-social）设置了width:100%，但执行rotate(-90deg)旋转后，元素的宽高会互换——原来的视口宽度变成旋转后的菜单高度，原来的75px高度变成旋转后的菜单宽度。如果你的视口高度大于宽度，旋转后的菜单高度就会小于视口高度，导致只延伸到页面中部。

具体排查修复步骤 #

• 修正尺寸适配逻辑
  把.header-social的宽度改为100vh（视口高度），确保旋转后的菜单高度能覆盖整个视口：

  .header-social {
    position: absolute;
    right: 0; /* 替换原float:right */
    transform: rotate(-90deg) translateY(-100%);
    transform-origin: top right;
    background: #7D522A66;
    height: 75px;
    width: 100vh; /* 用视口高度作为原始宽度 */
    z-index: 2000;
  }
  

• 清理冗余定位属性
  position:absolute和float属性不要混用，.hamburger-vertical也改用定位控制位置：

  .hamburger-vertical{
      border: solid 1px;
      position: absolute;
      right: 0;
      top: 0;
      width: 117px;
      height: 100%;
      background-color: #CAA571;
  }
  

• 验证transform参数
  当前transform-origin:top right是正确的，但如果调整后菜单位置偏移，可微调translateY值，比如改成translateY(-75px)（对应菜单自身高度），确保旋转后菜单紧贴视口右侧顶部。

• 检查父容器定位
  如果.header-social的父元素存在，要确保父元素设置了position:relative，否则absolute定位会以<html>/<body>为参考，可能导致意外截断。

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