调整roadmap-box高度后网页底部出现空白的问题求助

当调整CSS中类名为roadmap-box（位于HTML底部）的height至20px以上时，网页底部会出现空白区域，且roadmap-box高度越高，底部空白越大。

1. transform的视觉位移特性：你给roadmap-box设置了transform: translateY(-500px)，这个属性仅在视觉上把元素向上移动，但元素原本占据的垂直空间并未被移除。当你增加元素高度时，它的占位空间也会同步变大，这部分空间就形成了底部空白。
2. footer定位逻辑问题：页面底部的.bottom使用position: absolute; bottom: 0;，它的父元素.bottom-parent未设置高度，无法被roadmap-box的占位空间撑开，导致footer无法自动填补空白区域。

方案1：用margin-top替代transform（推荐） #

将roadmap-box的transform: translateY(-500px)替换为margin-top: -500px，这样元素会真正向上移动，不会留下多余的占位空间：

.roadmap-box {
  width: 100%;
  height: 50px;
  background-color: white;
  margin-top: -500px; /* 替换原transform属性 */
}

方案2：调整footer定位（适配现有transform） #

如果必须保留transform，可以给.bottom-parent设置相对定位，并根据roadmap-box的高度调整bottom值，手动把footer向上移动抵消空白：

.bottom-parent {
  position: relative;
  bottom: 50px; /* 值与roadmap-box的height保持一致 */
}

额外优化建议 #

• 移除.banner中硬编码的padding-bottom: 2100px，改用自适应布局（比如min-height或让内容自然撑开），避免页面高度冗余。
• 修复.content中top: 60的单位缺失问题，改为top: 60px。

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