非固定Header下汉堡菜单高度设为页面高度减Header的实现问询

嘿，我来帮你搞定这个问题！你现在遇到的核心痛点是：用绝对定位的菜单，高度计算依赖于父元素的高度，当页面滚动后，父元素（body）的高度会超过视口，导致calc(100% - 65px)算出来的高度不对，菜单底部就会出现显示问题。

但完全不需要把Header改成固定定位就能实现完美适配！下面给你两个实用的方案，都是我自己做项目时常用的：

方案1：CSS变量+视口单位（推荐，兼顾灵活性和简洁性） #

这个方案用CSS变量动态存储Header的实际高度，结合视口单位让菜单始终贴合视口，既不用硬编码高度值，也能在页面滚动时保持菜单的正确尺寸。

完整修改代码： #

HTML（结构保持你原来的非固定Header）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
 <p>header</p>
 <div id="burger">=</div>
</header>
<div id="menu">
 <p>Home</p>
 <p>Trending</p>
</div>
<div id="content">
 <p>hey 1</p>
 <p>hey 2</p>
 <p>hey 3</p>
 <p>hey 4</p>
 <p>hey 5</p>
 <p>hey 6</p>
 <p>hey 7</p>
 <p>hey 8</p>
 <p>hey 9</p>
 <p>hey 10</p>
</div>

CSS

* { padding: 0; margin: 0; }
body { 
  display: flex; 
  flex-direction: column; 
  min-height: 100vh; 
}
header { 
  padding: 5px; 
  height: 55px; 
  background-color: red;
  position: relative;
  z-index: 2; /* 确保Header在菜单上方 */
}
#burger { 
  border: 1px solid #000; 
  font-size: 1.2em; 
  width: 20px; 
  height: 20px; 
  text-align: center; 
  cursor: pointer; 
}
#menu { 
  display: none; 
  position: fixed; /* 关键：菜单相对于视口定位 */
  width: 100%; 
  background-color: lightyellow;
  top: var(--header-height); /* 用变量动态设置顶部位置 */
  height: calc(100vh - var(--header-height)); /* 视口高度减去Header高度 */
  z-index: 1;
}
#content { flex: 1; background-color: green }
p { margin: 5px }

JavaScript

$(document).ready(function() {
  // 动态计算并设置Header的总高度（包含padding）
  function updateMenuDimensions() {
    const headerTotalHeight = $('header').outerHeight();
    document.documentElement.style.setProperty('--header-height', `${headerTotalHeight}px`);
  }
  
  // 页面加载时初始化
  updateMenuDimensions();
  // 窗口大小变化时重新计算（比如响应式布局切换）
  $(window).resize(updateMenuDimensions);
  
  // 汉堡菜单切换逻辑
  $('#burger').on('click', function() { 
    $('#menu').toggle(); 
  });
});

方案2：纯JS动态设置菜单尺寸 #

如果不想用CSS变量，直接用JS动态计算菜单的top和height也可以，逻辑更直观：

修改后的JavaScript #

$(document).ready(function() {
  const $menu = $('#menu');
  
  $('#burger').on('click', function() { 
    $menu.toggle();
    
    // 菜单显示时才计算尺寸
    if ($menu.is(':visible')) {
      const headerHeight = $('header').outerHeight();
      $menu.css({
        top: `${headerHeight}px`,
        height: `${$(window).height() - headerHeight}px`
      });
    }
  });
  
  // 窗口大小变化时，若菜单显示则重新调整高度
  $(window).resize(function() {
    if ($menu.is(':visible')) {
      const headerHeight = $('header').outerHeight();
      $menu.css('height', `${$(window).height() - headerHeight}px`);
    }
  });
});

对应的CSS只需要把#menu改成固定定位，去掉原来的top和height：

#menu { 
  display: none; 
  position: fixed; 
  width: 100%; 
  background-color: lightyellow;
  z-index: 1;
}

方案原理说明 #

• 用position: fixed让菜单脱离文档流，相对于浏览器视口定位，这样不管页面怎么滚动，菜单的位置和高度都只和视口相关。
• 用outerHeight()获取Header的实际总高度（包含padding和border），避免硬编码65px这种容易出错的固定值，真正实现自动适配。
• 监听窗口resize事件，确保在窗口尺寸变化时（比如用户缩放浏览器），菜单能自动调整尺寸。

这样即使Header不是固定定位，菜单也能完美适配其高度，滚动页面时菜单底部始终对齐视口底部，不会出现显示不全或超出的问题。

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