100% height属性失效：原正常网站在Linux版Chrome中显示异常

问题根源 #

使用height: %时，元素的百分比高度必须基于直接父元素的明确高度值（不能是默认的auto），或者父元素属于flex/grid布局容器（这类容器会让子元素的百分比高度基于容器可用空间）。你的代码中，.board的父元素.blur是普通block元素，虽然.blur设置了height:100%继承自body的100vh，但浏览器对这种嵌套百分比高度的渲染逻辑可能因版本更新发生调整，导致.board的height:70%无法正确计算。

修复方案 #

以下两种方法都能解决问题，选其一即可：

方法1：将.blur改为flex容器

通过flex布局让子元素的百分比高度直接基于容器可用空间：

body {
  height: 100vh;
  width: 100vw;
  margin: 0; /* 去掉默认margin，避免滚动条干扰 */
}

.blur {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.board {
  height: 70%;
  display: grid;
}

#chessboard {
  height: 100%;
  aspect-ratio: 1/1;
  display: block;
  background: red;
}

方法2：给.blur设置明确的100vh高度

直接让.blur的高度与视口一致，让子元素的百分比高度有明确参考：

body {
  height: 100vh;
  width: 100vw;
  margin: 0; /* 去掉默认margin，避免滚动条干扰 */
}

.blur {
  height: 100vh;
  width: 100vw;
  display: block;
}

.board {
  height: 70%;
  display: grid;
}

#chessboard {
  height: 100%;
  aspect-ratio: 1/1;
  display: block;
  background: red;
}

额外说明 #

• 给body添加margin:0是为了消除浏览器默认边距，避免出现不必要的滚动条，保证布局匹配视口尺寸。
• 你的Linux版Chrome可能因版本更新，对CSS百分比高度的渲染规则进行了严格化，导致之前的嵌套百分比写法不再生效，以上两种方案都能适配新的渲染逻辑。

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