未知高度非固定导航栏下纯CSS实现剩余屏幕高度填充方案咨询

解决方案 #

完全可以通过CSS Grid布局实现，不需要修改现有HTML结构，也不会出现导航栏遮挡#title的问题，代码如下：

完整CSS代码 #

/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* 最小高度铺满视口，内容超出时自动撑开 */
  min-height: 100vh;
  display: grid;
  /* 网格分为两行：第一行高度由导航栏内容自适应，第二行占满剩余视口高度 */
  grid-template-rows: auto 1fr;
}

nav {
  /* 导航栏自定义样式保留，无需额外修改 */
  background-color: grey;
  padding: 12px 20px; /* 仅为示例，可根据需求调整，高度变化不影响布局 */
}

#title {
  /* 最小高度占满父容器article的高度，即导航栏下方的剩余视口高度 */
  min-height: 100%;
  /* 标题区自定义样式保留 */
  background-color: lightblue;
}

对应HTML结构（完全和要求一致，无修改） #

<body>
  <nav>top nav with unknown height, not fixed</nav>
  <article>
    <div id="title">Full height title image</div>
    Article continues <br>
    much text <br>
    much text <br>
    much text
  </article>
</body>

实现原理 #

1. 给body设置min-height: 100vh保证基础高度铺满整个视口，内容超出时会自动撑开不会截断；
2. 把body设为网格布局，两行的高度规则auto 1fr会自动计算导航栏的实际高度，将剩余视口全部分配给第二行的article元素；
3. #title设置min-height: 100%会占满article的初始高度，刚好填满导航栏下方的可视区域，article内部的后续正文内容会自然排在#title下方，初始状态不在视口内，向下滚动即可查看。

该方案完全不依赖导航栏的固定高度值，导航栏内容变化导致高度调整时布局会自动适配，也不会出现元素重叠遮挡的问题。

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