元素在调整页面大小时移动。

Question

将元素与CSS和尾风CSS放在一起。

不过，只要我垂直移动页面，元素就会移动。“固定”属性似乎是罪魁祸首，但我不知道如何在没有固定属性的情况下使页面中的元素更低。

目前为止的代码：

  .swipeButtonsXS {
    bottom: 11vh;
    gap: 15px;
  }
}
@media (min-width: 640px) {
  .swipeButtonsSM {
    bottom: 11vh;
    gap: 15px;
  }
}
@media (min-width: 768px) {
  .swipeButtonsMD {
    bottom: 11vh;
    gap: 15px;
  }
}

@media (min-width: 1024px) {
  .swipeButtonsLG {
    bottom: 4vh;
    gap: 15px;
  }
}

@media screen and (min-width: 1280px) {
  .swipeButtonsXL {
    bottom: 31vh;
    gap: 15px;
  }
}

import { FaCheck } from "react-icons/fa";
import "./DatingMainButtons.css";
function DatingMainButtons() {
  return (
    <>
      <div className="fixed w-full flex justify-center swipeButtonsXL swipeButtonsLG swipeButtonsMD swipeButtonsSM swipeButtonsXS ">
        <FaTimes className="xl:w-10 xl:h-10 lg:w-7 lg:h-7 md:w-7 md:h-7 sm:w-6 sm:h-6  xs:w-6 xs:h-6  border border-gray-200  rounded-full bg-white text-gray-300 transition duration-500 ease-in-out  transform hover:-translate-y-1 hover:scale-110" />
        <FaCheck className="xl:w-10 xl:h-10 lg:w-7 lg:h-7 md:w-7 md:h-7 sm:w-6 sm:h-6  xs:w-6 xs:h-6  border border-gray-200  rounded-full bg-white text-gray-600 transition duration-500 ease-in-out  transform hover:-translate-y-1 hover:scale-110" />
      </div>
    </>
  );
}

Answer 1

我认为您需要一个带有w-full、h-screen、overflow-auto和relative的父级div作为顺风类。您将所有页面内容都放在这个div中，包括按钮组件。简化示例：

<div class="w-full h-full overflow-auto relative">
    <!-- Full width and height container -->
    <div>...Scrollable main content...</div>
    <div class="fixed w-full bottom-4 gap-4 flex justify-center">
        <!-- Fixed button row -->
        <FaTimes class="..."></FaTimes>
        <FaCheck class="..."></FaCheck>
    </div>
</div>

希望这能有所帮助。