Next.js 13 结合 SCSS 开发时高度表现异常问题排查

问题根源 #

Next.js 13自带全局样式重置、根容器（#__next）层级，和纯HTML环境的默认样式规则存在差异。你给main设置height:auto时，它的高度完全由内容撑开，子元素.login的height:100%找不到明确的父级高度参照，自然无法正常占满；而纯HTML测试时，要么隐式给了html/body的100%高度，要么没有额外布局层级干扰，所以表现正常。

具体解决步骤 #

1. 打通根层级高度继承链 #

先给最外层的html、body和Next.js根容器设置100%高度，让高度能一路传递到main元素：

html, body, #__next {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

2. 给main元素补全高度上下文 #

只靠min-height没法给子元素提供height:100%的参照，改成同时设置height:100%和min-height，或根据内容情况调整：

$height-header: 60px;
$height-footer: 40px;

main {
  // 给main确定的高度值，让子元素能继承高度参照
  height: 100%;
  min-height: calc(100% - #{$height-header} - #{$height-footer});
  // 若内容可能超出视口，换成以下写法避免内容截断
  // height: calc(100% - #{$height-header} - #{$height-footer});
  // overflow-y: auto;
}

.login {
  height: 100%;
  // 可添加背景色调试，确认是否占满父元素
  // background: #f0f0f0;
}

3. 排查布局组件的干扰 #

如果main嵌套在Layout组件中，检查Layout容器是否设置了height:auto，或存在额外padding/margin打断高度传递——Layout容器也需要设置height:100%。

4. 快速调试方法 #

用浏览器F12打开Elements面板，选中.login查看Computed样式里的height值，再往上逐个检查main、#__next、body、html的高度，哪一层不是100%，就从该层修复。

纯HTML测试正常的原因 #

纯HTML环境中，你大概率默认给html/body设置了height:100%，且没有#__next这层额外容器，高度传递更顺畅；另外内联样式优先级高于SCSS编译后的样式，不会被全局重置覆盖，所以表现一致。

内容的提问来源于stack exchange，提问作者seung hwan Son