调整页面宽度时底部出现溢出空白的CSS/HTML问题求助

问题描述 #

当屏幕尺寸调整为手机等小视图时，页面底部出现随宽度缩小而变长的白色空白区域，经Chrome Pesticide插件排查，该空白属于页面内HTML元素。

问题原因分析 #

1. 固定百分比高度的溢出问题

   • .container 和 .white-rectangle 均设置了 height: 150%，这种基于父元素的百分比高度在小屏幕下，会因内容实际高度超出计算值，或父元素（如body）高度未正确定义，导致元素布局异常，产生额外空白。
   • .websiteNav 设置的 height: 20% 同样依赖父元素高度，父元素高度不确定时会引发布局混乱。

2. 单选按钮标签的绝对定位偏移

   • .option label::after 和 .option label::before 使用 right: 100%/right: 101% 绝对定位，小屏幕下该设置会让图标元素超出容器范围，迫使页面横向撑开，间接引发纵向空白。

3. 导航栏的固定间距问题

   • .reviewbutton 的 margin-left: 40vw 在小屏幕下会让导航项超出容器宽度，导致页面整体布局被打乱，进而产生空白。

修复方案 #

1. 替换固定百分比高度为自适应高度 #

让元素高度随内容自动调整，避免强制高度导致的溢出：

.websiteNav {
  height: auto; /* 替换原20%高度，自适应内容 */
  padding: 1rem 0; /* 补充内边距保证内容间距 */
}

.container {
  height: auto; /* 替换原150%高度，随内容自适应 */
  min-height: calc(100vh - 80px); /* 可选：保证容器至少占满视口剩余高度，80px为预估导航高度 */
}

.white-rectangle {
  height: auto; /* 替换原150%高度，随内容自适应 */
}

2. 修正单选按钮图标的定位 #

将图标移至标签左侧，避免超出容器：

.option {
  padding-left: 2rem; /* 为图标预留空间 */
  margin-left: 0; /* 移除原10%左侧margin */
}

.option label::after {
  left: 0; /* 替换right: 100% */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  width: 1.2rem; /* 用固定单位替代百分比，小屏幕更稳定 */
  height: 1.2rem;
}

.option label::before {
  left: 0.15rem; /* 替换right: 101% */
  top: 50%;
  transform: translateY(-50%);
  width: 0.9rem;
  height: 0.9rem;
}

3. 优化导航栏响应式布局 #

让导航项自适应屏幕宽度，避免固定间距撑开页面：

.reviewbutton {
  margin-left: auto; /* 替换40vw，让按钮自动靠右对齐 */
}

/* 小屏幕下导航垂直排列（可选） */
@media (max-width: 768px) {
  .websiteNavOptions {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
  }
  .logo, .homeitem {
    margin-left: 0;
  }
}

4. 补充基础布局设置 #

确保页面根元素高度正确，防止横向溢出：

html, body {
  height: 100%;
  overflow-x: hidden; /* 禁止横向滚动，避免空白 */
}

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