如何用100vh创建无滚动的响应式全屏网页？

Hey，我来帮你搞定这个问题！首先咱们得理清楚核心痛点：用100vh做外层容器高度时，移动端经常会出现地址栏遮挡内容、视口高度不实时更新的问题，同时还要让内层的#root-inner-container实现完美的响应式适配。下面是一套落地的解决方案：

一、先修复外层容器的高度适配痛点 #

100vh在移动端浏览器（比如Chrome、Safari）有个大坑：当地址栏收起/展开时，视口高度会变，但100vh不会跟着更新，要么内容被挡，要么莫名其妙出现滚动。咱们换两种更靠谱的方式：

方案1：用Flex+兼容属性适配视口 #

直接修改#root的样式，兼顾桌面和移动端：

#root {
  position: relative;
  min-height: 100vh;
  /* 适配移动端浏览器的可用视口高度 */
  min-height: -webkit-fill-available;
  overflow: hidden;
  /* 用Flex让内层容器更易布局 */
  display: flex;
  flex-direction: column;
}

-webkit-fill-available这个属性会让容器自动适配浏览器的真实可用高度，完美解决移动端地址栏的问题。

方案2：JS动态计算视口高度（更精确） #

如果需要极致的适配，可以用JS实时监听视口变化，自定义一个视口高度变量：

// 初始化视口高度变量
function setViewportHeight() {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

// 首次加载+窗口变化时更新
setViewportHeight();
window.addEventListener('resize', setViewportHeight);
window.addEventListener('orientationchange', setViewportHeight);

然后CSS里用这个自定义变量替代100vh：

#root {
  position: relative;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}

这种方式能实时跟着视口高度变，彻底避开100vh的所有坑。

二、实现#root-inner-container的响应式布局 #

外层容器搞定后，咱们让内层容器完美适配不同屏幕：

1. 先让内层占满外层空间 #

给#root-inner-container加基础样式，确保它填满#root的可用区域：

#root-inner-container {
  width: 100%;
  height: 100%;
  /* 开启Flex/Grid让内容灵活布局 */
  display: flex;
  flex-direction: column;
  /* 防止内容溢出产生滚动 */
  overflow: hidden;
}

2. 三种响应式适配方法 #

根据你的内容类型，选合适的方式：

• 媒体查询精准控制：针对不同屏幕宽度定制样式，比如：

/* 平板及以下设备 */
@media (max-width: 768px) {
  #root-inner-container .content-card {
    font-size: 16px;
    padding: 1rem;
    margin: 0.5rem;
  }
}

/* 手机设备 */
@media (max-width: 480px) {
  #root-inner-container .content-card {
    font-size: 14px;
    padding: 0.5rem;
    margin: 0.25rem;
  }
}

• Flex/Grid自动适配：用弹性布局或网格布局让内容自动调整，比如：

#root-inner-container .content-grid {
  display: grid;
  /* 自动根据屏幕宽度调整列数，最小列宽250px */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

这种方式不用写一堆媒体查询，内容会自己适应屏幕。

• 相对单位替代固定值：用rem、vw等相对单位，让元素大小随视口变化：

#root-inner-container h1 {
  /* 字体大小随视口宽度自适应 */
  font-size: 5vw;
  max-font-size: 2rem;
}

三、最后验证效果 #

记得在不同设备（桌面、平板、手机）和浏览器上测试，确保：

• 外层容器始终占满屏幕宽高，没有滚动条
• 内层内容在各种屏幕尺寸下都能正常显示，不会被遮挡或溢出

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