初始100vh容器布局问题：浏览器Resize时导航与Hero高度适配异常

看起来你遇到的布局异常，大概率是100vh的特性限制或者flex容器内元素溢出导致的——比如浏览器窗口缩小时导航栏内容撑高、移动端浏览器动态工具栏挤压视口，都会让原本占满100vh的布局出现错位或溢出。下面给你几个针对性的解决方案：

一、替换100vh为100svh（推荐） #

100vh的问题在于它是基于初始视口高度计算的，在移动浏览器中，当地址栏收起/展开时，视口高度会动态变化，但vh不会跟着调整，导致容器要么被截断要么超出视口。而100svh（small viewport height）是CSS新增的视口单位，会自动适配当前可见的最小视口高度，完美解决这个问题。

修改后的CSS代码：

.full-height {
  /* 用svh替代vh，适配动态视口 */
  height: 100svh;
  display: flex;
  flex-direction: column;
  /* 防止内部元素溢出时撑破整个容器 */
  overflow: hidden;

  .nav {
    padding: 2rem 5rem;
    /* 确保导航栏内容过多时内部滚动，不挤压其他区域 */
    overflow: auto;
    /* 可选：设置最小高度，避免导航栏被过度压缩 */
    min-height: fit-content;
  }

  .hero {
    background-image: .....;
    background-size: cover;
    flex: 1;
    /* 当hero区域内容超出时，内部滚动 */
    overflow: auto;
  }
}

二、兼容旧浏览器的备选方案（JavaScript动态计算） #

如果需要兼容不支持svh的旧浏览器（比如部分老版本Chrome/Firefox），可以用JavaScript动态计算当前视口高度：

// 动态设置.full-height的高度
function updateFullHeight() {
  const fullHeightContainer = document.querySelector('.full-height');
  if (fullHeightContainer) {
    fullHeightContainer.style.height = `${window.innerHeight}px`;
  }
}

// 初始化设置
updateFullHeight();
// 窗口大小变化时重新计算
window.addEventListener('resize', updateFullHeight);

关键注意点 #

• 给.full-height添加overflow: hidden：防止内部元素内容过多时撑破整个视口布局。
• 给nav和hero分别设置overflow: auto：当它们的内容超过自身分配的高度时，内部会出现滚动条，而不是破坏整体布局。
• 如果导航栏高度固定，可以给.nav设置固定height，这样flex布局的分配会更稳定；如果导航栏内容是动态的，min-height: fit-content能确保它不会被过度压缩。

这样调整后，不管怎么拖动浏览器窗口大小，.full-height都会始终占满当前可见视口，nav和hero的布局也能保持稳定，不会出现异常。

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