移动端网站底部及右侧出现多余空白的问题求助

网站在移动端时，底部和右侧出现多余空白，body与root元素本该在Twitch logo处结束，希望页面仅能滚动到该位置。

我的ComingSoon.jsx代码： #

import { useNavigate } from "react-router-dom";

const ComingSoon = () => {
  const nav = useNavigate();
  return (
    <div className="min-h-screen min-w-fit align-middle justify-center">
      <div className="relative p-5 right-8 xl:right-19rem xxl:right-38rem 3xl:right-83.5rem 3xl:w-screen bg-red-600 xl:w-95vw">
        {/* <p className="relative text-9xl text-center text-white">Coming Soon</p> */}
        <img
          src="/src/Imgs/logo.png"
          className="relative xl:w-50rem xl:left-32rem xl:h-5rem"
        />
        <button
          className="relative w-32 mx-2 p-2 top-2 xxl:text-5xl xxl:w-72 text-white hover:w-36 hover:mx-0  hover:shadow-lg hover:bg-white hover:text-black hover:rounded"
          onClick={() => nav("/about")}
        >
          About us
        </button>
        <button
          className="relative w-32 mx-2 p-2 top-2 xxl:text-5xl xxl:w-72 text-white hover:w-36 hover:mx-0  hover:shadow-lg hover:bg-white hover:text-black hover:rounded"
          onClick={() => nav("/critics")}
        >
          {/* eslint-disable-next-line react/no-unescaped-entities */}
          Game Critic's
        </button>
      </div>
      <div className="relative w-screen left-10 h-32rem bg-mobilecs bg-contain bg-no-repeat xl:bg-comingsoon xl:h-38rem xxl:h-50rem xl:-left-72 xl:top-16 xxl:-left-38rem xxl:top-32 3xl:-left-80rem 3xl:h-80rem 3xl:top-64" />
      <p className="relative right-32 top-2 xl:right-72 xl:top-20 text-white xxl:text-2xl xxl:right-38rem xxl:top-22rem 3xl:text-5xl 3xl:right-80rem 3xl:top-28rem">
        In the meantime you can also check out:
      </p>
      <p className="relative right-32 top-2 xl:right-72 xl:top-20 text-white xxl:text-2xl xxl:right-38rem xxl:top-22rem 3xl:text-5xl 3xl:right-80rem 3xl:top-28rem">
        Trisp
      </p>
      <a
        className="relative right-32 top-2 xl:right-72 xl:top-20 xxl:text-2xl xxl:right-38rem xxl:top-22rem 3xl:text-5xl 3xl:right-80rem 3xl:top-28rem"
        href="https://www.twitch.tv/trisp"
        target="_blank"
        rel="noopener noreferrer"
      >
        <button className="text-white">
          <img
            className="h-10 w-10 xxl:h-16 xxl:w-16 3xl:h-32 3xl:w-32"
            src="./src/Imgs/twitchlogo.webp"
          />
        </button>
      </a>
      <a
        className="relative right-32 top-2 xl:right-72 xl:top-20 xxl:text-2xl xxl:right-38rem xxl:top-22rem 3xl:text-5xl 3xl:right-80rem 3xl:top-28rem"
        href="https://www.youtube.com/@Trisp."
        target="_blank"
        rel="noopener noreferrer"
      >
        <button className="text-white">
          <img
            className="h-10 w-10 xxl:h-16 xxl:w-16 3xl:h-32 3xl:w-32"
            src="./src/Imgs/youtubelogo.webp"
          />
        </button>
      </a>
      <iframe
        className="absolute opacity-0 -right-52 xl:top-28"
        src="https://player.twitch.tv/?channel=trisp&parent=playerreviewedgames.com&muted=true"
        height="440"
        width="790"
        allowfullscreen
      ></iframe>
    </div>
  );
};
export default ComingSoon;

我的index.html代码： #

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Player Reviewed Games</title>
  </head>
  <body class="bg-dark-blue box-border top-0 left-0 right-0 bottom-0 overflow-y-scroll overflow-x-hidden ">
    <div id="root" class=""></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

试过fixed定位、overflow:hidden等方法，都无效，不知道怎么解决。

问题根源及修复步骤 #

1. 解决右侧空白

   • 移除最外层容器的min-w-fit属性，替换为w-full，避免容器被内容撑出视口宽度。
   • 给隐藏的iframe添加hidden类（或设置display:none），它的宽高会强制撑开页面横向空间，即使透明度为0也无法消除布局影响。

2. 解决底部空白

   • 把最外层容器的min-h-screen改为h-screen overflow-y-auto，限制页面高度为当前视口高度，超出内容滚动，避免不必要的高度溢出。
   • 调整所有带top属性的相对定位元素的偏移值，避免元素过度向下偏移撑高页面；或者改用flex/grid布局实现垂直方向的位置控制，减少硬编码的定位值。

3. 优化定位逻辑

   • 大量使用right-xx、left-xx的相对定位容易导致元素超出视口，建议最外层容器使用flex flex-col items-center justify-center min-h-screen，通过flex布局实现内容居中，替代手动调整定位值的方式，让页面在移动端更自适应。

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