React蜂窝六边形组件全屏背景色设置及移动端留白修复

我在React项目中实现了蜂窝状六边形组件，希望将其背景色设置为#1B2435（与网页背景色一致），但设置后网页出现白色留白，无法完全覆盖背景。桌面端显示正常，但平板和移动端存在该问题。曾尝试将所有蜂窝元素背景设为透明并继承页面背景色，仍未解决。

相关代码 #

Hexagon组件代码 #

import React from "react";
import "./Hexagon.css";

const Hexagon = () => {
  return (
    <div className="h-full xl:h-[calc(100vh-84px)] bg-transparent">
      <ul className="honeycomb bg-transparent">
        <li className="honeycomb-cell">
          <img className="honeycomb-cell_image" src="" />
          <div className="honeycomb-cell_title">FullDOSER</div>
        </li>
        <li className="honeycomb-cell">
          <img className="honeycomb-cell_image" src="" />
          <div className="honeycomb-cell_title">LowDOSER</div>
        </li>
        <li className="honeycomb-cell">
          <img className="honeycomb-cell_image" src="" />
          <div className="honeycomb-cell_title">TrenDOSER</div>
        </li>
        <li className="honeycomb-cell">
          <img className="honeycomb-cell_image" src="" />
          <div className="honeycomb-cell_title">HostDOSER</div>
        </li>
        <li className="honeycomb-cell">
          <img className="honeycomb-cell_image" src="" />
          <div className="honeycomb-cell_title">DeepDOSER</div>
        </li>
        <li className="honeycomb-cell">
          <img className="honeycomb-cell_image" src="" />
          <div className="honeycomb-cell_title">CustomDOSER</div>
        </li>
        <li className="honeycomb-cell bg-backgroundColor w-full">
          <img className="honeycomb-cell_image" src="" />
          <div className="honeycomb-cell_title">MagicDOSER</div>
        </li>
        <li className="honeycomb-cell honeycomb_placeholder honeycomb_Hidden bg-backgroundColor"></li>
      </ul>
    </div>
  );
};

export default Hexagon;

Hexagon.css代码 #

.honeycomb {
  background: transparent;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  transform: translateY(80px);
}

.honeycomb-cell {
  -webkit-box-flex: 0;
  flex: 0 1 250px;
  max-width: 250px;
  height: 137.5px;
  margin: 65.4px 12.5px 25px;
  position: relative;
  padding: 0.5em;
  text-align: center;
  z-index: 1;
  box-shadow: 0px 0px 15px 0 rgba(0, 0, 0, 0.1);
  background: #000;
}
.honeycomb-cell_img {
  object-fit: cover;
  object-position: center;
  filter: grayscale(100%);
}
.honeycomb-cell_title {
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-hyphens: auto;
  hyphens: auto;
  word-break: break-word;
  color: #09a781;
  font-weight: 700;
  font-size: 1.75em;
  transition: opacity 350ms;
}
.honeycomb-cell_title > small {
  font-weight: 400;
  margin-top: 0.25em;
}
.honeycomb-cell::before,
.honeycomb-cell::after {
  content: "";
}
.honeycomb-cell::before,
.honeycomb-cell::after,
.honeycomb-cell_img {
  top: -50%;
  left: 0;
  width: 100%;
  height: 200%;
  display: block;
  position: absolute;
  -webkit-clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: -1;
}
.honeycomb-cell::before {
  background: #000;
  transform: scale(1.055);
}
.honeycomb-cell::after {
  background: #111111;
  opacity: 0.7;
  transition: opacity 350ms;
  -webkit-transition: opacity 350ms;
}
.honeycomb-cell:hover .honeycomb-cell_title {
  opacity: 100;
  color: #fff;
}
.honeycomb-cell:hover .honeycomb-cell_img {
  filter: grayscale(0%);
}
.honeycomb-cell:hover::before {
  background: #312d4b;
}
.honeycomb-cell:hover::after {
  opacity: 0;
}
.honeycomb_Hidden {
  display: none;
  opacity: 0;
  width: 250px;
  margin: 0 12.5px;
}

/****** Responsive *******/

@media (max-width: 550px) {
  .honeycomb-cell {
    margin: 81.25px 25px;
  }
}

@media (min-width: 550px) and (max-width: 825px) {
  .honeycomb-cell:nth-child(3n) {
    margin-right: calc(50% - 125px);
    margin-left: calc(50% - 125px);
  }

  .honeycomb_Hidden:nth-child(3n + 5) {
    display: block;
  }
}

@media (min-width: 825px) and (max-width: 1100px) {
  .honeycomb-cell:nth-child(5n + 4) {
    margin-left: calc(50% - 275px);
  }

  .honeycomb-cell:nth-child(5n + 5) {
    margin-right: calc(50% - 275px);
  }

  .honeycomb_Hidden:nth-child(5n),
  .honeycomb_Hidden:nth-child(5n + 3) {
    display: block;
  }
}
@media (min-width: 1100px) {
  .honeycomb-cell:nth-child(7n + 5) {
    margin-left: calc(50% - 400px);
  }

  .honeycomb-cell:nth-child(7n + 7),
  .honeycomb-cell:nth-child(7n + 5):nth-last-child(2) {
    margin-right: calc(50% - 400px);
  }

  .honeycomb_Hidden:nth-child(7n + 7),
  .honeycomb_Hidden:nth-child(7n + 9),
  .honeycomb_Hidden:nth-child(7n + 11) {
    display: block;
  }
}

ScanPackage组件代码 #

import React from "react";
import Hexagon from "../components/scanComponents/Hexagon";

const ScanPackage = () => {
  return (
    <div className="">
      <div className="">
        {/* Header */}
        <div className="w-full text-textColor -mb-10">
          <div className="flex items-center mb-4">
            <hr className="w-full hidden md:block" />
            <div className="text-center text-2xl w-full">Scan Packages</div>
            <hr className="w-full hidden md:block" />
          </div>

          <div className="w-full sm:w-[60%] text-center text-sm md:text-base mx-auto">
            Test Test <hr className="mt-2" />
          </div>
        </div>
      </div>

      {/* Body */}
      <Hexagon />
    </div>
  );
};

export default ScanPackage;

移动端问题截图：

问题根源 #

1. .honeycomb容器用transform: translateY(80px)向上偏移，但未设置足够的底部内边距，导致容器底部暴露空白。
2. 六边形单元格及其伪元素的背景色未统一为页面背景色#1B2435，单元格缝隙显示默认白色。

具体修改步骤 #

1. 补全容器底部空白
   在.honeycomb类中添加底部内边距，值大于偏移量：

.honeycomb {
  /* ...原有样式 */
  padding-bottom: 100px; /* 新增：覆盖偏移后的底部空白 */
}

2. 统一背景色为#1B2435
   替换所有相关元素的背景色：

.honeycomb-cell {
  /* ...原有样式 */
  background: #1B2435; /* 替换原#000 */
}

.honeycomb-cell::before {
  background: #1B2435; /* 替换原#000 */
  /* ...原有样式 */
}

.honeycomb-cell::after {
  background: #1B2435; /* 替换原#111111 */
  /* ...原有样式 */
}

3. 确保父容器背景正确
   给ScanPackage的外层div添加背景色和最小高度：

const ScanPackage = () => {
  return (
    <div className="bg-[#1B2435] min-h-screen"> {/* 新增 */}
      {/* ...原有内容 */}
    </div>
  );
};

4. 优化Hover效果（可选）
   若需保留hover交互，调整hover时的背景色以适配页面风格：

.honeycomb-cell:hover::before {
  background: #312d4b; /* 可根据需求修改 */
}

额外优化 #

• 移除Hexagon组件中多余的bg-backgroundColor类，统一通过CSS控制背景色。
• 检查移动端响应式margin值，避免单元格间距过大导致留白。

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