React多全屏滚动页面异常：新增页面后首屏消失的技术问询

问题原因 #

1. 重复使用同一ID：HTML规范要求id属性必须唯一，你给所有页面组件都加了id="page"，浏览器处理重复ID的样式时会出现渲染异常，导致顶部页面高度被挤压。
2. 默认边距干扰：body或外层.Main容器的默认margin/padding未清除，会占用额外空间，进一步压缩顶部页面的可视高度。

修复步骤 #

1. 修正ID唯一性问题 #

把单个页面组件的唯一ID替换为class，同时给每个页面加上专属的样式class（比如page1、page2）。以Page1组件为例，其他页面组件同理修改：

import React from "react";

const Page1 = () => {
  return (
    <div className="page page1">
      Page Text page 1
    </div>
  );
};

export default Page1;

2. 调整CSS样式 #

将原有的#page选择器改为.page（匹配class），同时清除全局和容器的默认边距，避免布局偏移：

/* 清除全局默认边距，避免干扰布局 */
body {
  margin: 0;
  padding: 0;
}

.Main {
  margin: 0;
  padding: 0;
}

/* 通用页面样式 */
.page{
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* 确保内边距不改变元素宽高 */
}

.page1{
    background-color: red;
}
.page2{
    background-color: orange;
}
.page3{
    background-color: yellow;
}
.page4{
    background-color: lime;
}
.page5{
    background-color: blue;
}

修复说明 #

• 遵守HTML的ID唯一性规范，能避免浏览器样式解析的异常行为，确保每个页面的100vh高度生效。
• 清除默认边距后，外层容器不会占用额外空间，每个页面组件能完整占据视口高度。
• box-sizing: border-box可以防止后续给页面添加内边距或边框时，元素高度超过100vh，保持布局稳定。

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