如何在导航栏下方垂直居中内容并适配剩余屏幕垂直空间？

这问题我之前也踩过坑——你现在用height: 100vh给section，相当于让它占满整个视口高度，但navbar已经占了一部分空间，两者叠加起来就超过了视口，自然就出现滚动条了。下面给你几个靠谱的解决办法，按推荐程度排序：

方案一：Flexbox布局整个页面（最推荐） #

把body设置成flex容器，让它的子元素（nav和section）按垂直方向排列，然后让section自动填充剩余空间。这样不管navbar的高度怎么变（比如响应式换行、内容调整），section都会自适应剩余空间，完美实现垂直居中且无滚动条。

修改后的CSS代码：

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

/* 关键：把body设为flex容器，垂直排列，最小高度占满视口 */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

nav { 
  display: flex; 
  justify-content: space-between; 
  border: 1px solid red;
}

section { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  flex: 1; /* 让section填充nav之外的剩余空间 */
  border: 1px solid blue;
}

HTML部分不需要修改，直接用你原来的就行。

方案二：用calc计算固定高度（适合导航栏高度固定的场景） #

如果你的navbar高度是固定值（比如50px），可以直接用calc()来计算section的高度，也就是100vh减去navbar的高度。但这个方案的缺点是，一旦navbar高度变化（比如移动端换行），就会出现适配问题。

修改后的section样式：

section { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  height: calc(100vh - 50px); /* 替换50px为你的navbar实际高度 */
  border: 1px solid blue;
}

方案三：Grid布局（和Flexbox效果一致，看个人习惯） #

用Grid布局也能达到同样的自适应效果，把body设为grid容器，指定第一行是navbar的自动高度，第二行填充剩余空间。

修改后的CSS代码：

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

body {
  display: grid;
  grid-template-rows: auto 1fr; /* 第一行自动适配navbar高度，第二行填充剩余 */
  min-height: 100vh;
}

nav { 
  display: flex; 
  justify-content: space-between; 
  border: 1px solid red;
}

section { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  border: 1px solid blue;
}

以上三个方案里，方案一和三都是自适应的，不用硬编码高度，是现在前端布局的主流做法，推荐优先使用。

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