父元素为position:fixed时，子元素高度相对视口的实现问题

这个间隙问题大概率是浏览器默认样式（比如body的默认margin）或者高度计算时未考虑盒模型规则导致的，结合你的需求，我推荐两种简洁可靠的纯CSS解决方案：

方案一：Flexbox 布局（最常用易维护） #

利用Flex的flex-grow属性让子元素自动填充剩余空间，同时重置默认样式彻底消除间隙：

<body>
  <div class="parent">
    <h2>父元素区域</h2>
  </div>
  <div class="child">
    子元素：填充父元素下方剩余视口空间
  </div>
</body>

/* 全局重置默认样式，消除body、元素的默认margin/padding，统一盒模型 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* 让body至少占满视口高度，避免内容不足时无法填充 */
  min-height: 100vh;
  /* 垂直排列父元素和子元素 */
  display: flex;
  flex-direction: column;
}

.parent {
  /* 父元素高度可自定义（固定值/自适应都支持） */
  height: 120px;
  background: #f0f0f0;
  padding: 1.5rem;
}

.child {
  /* 核心：让子元素自动填充剩余所有空间 */
  flex-grow: 1;
  background: #e0e0e0;
  padding: 1.5rem;
}

方案二：CSS Grid 布局（更直观的行分配） #

用Grid的行模板机制，直接指定父元素占自适应行，子元素占剩余全部空间：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: grid;
  /* 第一行自适应父元素高度，第二行占满剩余视口空间 */
  grid-template-rows: auto 1fr;
}

.parent {
  height: 120px;
  background: #f0f0f0;
  padding: 1.5rem;
}

.child {
  background: #e0e0e0;
  padding: 1.5rem;
}

为什么你之前的方法会出现间隙？ #

大概率是这几个细节没处理好：

• 没有清除body的默认margin（浏览器默认给body加了8px margin），导致视口高度计算时多了这个额外空间
• 未设置box-sizing: border-box，父元素的padding/border会额外增加整体高度，让100vh - 父元素高度的计算出现偏差
• 直接用height: 100vh可能会和移动端浏览器的地址栏/工具栏冲突，改用min-height: 100vh更适配各种场景

这两种方案都不需要复杂的JS计算，纯CSS就能实现精准的剩余空间填充，完全符合你的需求。

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