多分辨率下如何将div元素正确固定在header元素底部？

要实现主表头固定在页面顶部，次表头紧贴主表头底部且适配多分辨率，你可以用固定容器包裹双表头的方案，完美解决高度自适应和固定定位的问题：

核心实现思路 #

把主表头和次表头放在一个position: fixed的父容器里，父容器固定在页面顶部，内部的两个表头用正常文档流布局（块级元素自然排列），这样不管主表头因分辨率变化导致高度改变，次表头都会自动贴合在它底部。

HTML 结构 #

<div class="fixed-header-wrapper">
  <header class="main-header">
    <!-- 主表头内容：logo、导航等 -->
    主表头 - 自适应高度内容
  </header>
  <div class="sub-header">
    <!-- 次级链接：分类、快捷入口等 -->
    次表头 - 次级链接区域
  </div>
</div>

<!-- 页面主内容 -->
<main class="page-content">
  <!-- 页面内容 -->
</main>

CSS 样式 #

/* 固定容器：整个表头区域固定在顶部 */
.fixed-header-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  z-index: 999; /* 确保表头在页面内容上方 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 可选：添加阴影区分内容 */
}

/* 主表头：高度自适应内容 */
.main-header {
  padding: 1.2rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  /* 可根据需求添加字体、布局样式，高度随内容自动变化 */
}

/* 次表头：自动贴合主表头底部 */
.sub-header {
  padding: 0.8rem 1rem;
  background-color: #f9fafb;
  /* 同样高度自适应内容 */
}

/* 页面内容：避开固定表头，防止被覆盖 */
.page-content {
  padding-top: 8rem; /* 初始值，后续用JS动态更新更准确 */
}

动态适配内容区 padding #

因为固定表头的高度会随分辨率/内容变化，纯CSS无法实时获取容器高度，所以用JS动态设置页面内容的padding-top，避免内容被表头覆盖：

function adjustContentPadding() {
  const headerWrapper = document.querySelector('.fixed-header-wrapper');
  const pageContent = document.querySelector('.page-content');
  if (headerWrapper && pageContent) {
    pageContent.style.paddingTop = `${headerWrapper.offsetHeight}px`;
  }
}

// 页面加载时初始化
window.addEventListener('load', adjustContentPadding);
// 窗口大小变化时更新
window.addEventListener('resize', adjustContentPadding);

为什么之前的方案不行？ #

• 给主header设position: relative后，它就失去了固定定位的特性，整个表头自然不会固定在顶部；
• 用固定margin-top的方式，只能适配当前分辨率下的表头高度，一旦表头因文字换行、字体缩放等导致高度变化，次表头就会错位。

额外优化点 #

• 如果主表头和次表头需要单独固定（比如滚动时次表头才出现），可以用CSS变量结合position: fixed：给主表头设置--main-header-height变量，次表头的top值设为var(--main-header-height)，同时用JS监听主表头高度变化更新变量；
• 移动端可以通过媒体查询调整表头的内边距、字体大小，进一步适配小屏设备。

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