React响应式设计固定定位问题：移动端底部按钮被遮挡

问题根源 #

移动端浏览器的地址栏、底部工具栏会动态占用视口空间，用100vh设置容器高度时，实际可显示区域会被这些UI元素挤压；加上Products组件设置fixed禁止滚动后，视口计算逻辑更易出现偏差，导致底部按钮被遮挡。

具体解决方案 #

1. 用100dvh替代100vh

dvh是CSS新增的动态视口高度单位，会自动排除浏览器动态UI（地址栏、工具栏）占用的空间，直接适配当前实际可用的视口高度。

修改CartMenu外层容器的高度设置：

// 原代码
<div className={`absolute ${!props.isCartDisplayed ? "hidden" : "flex flex-col"} flex justify-between h-[100vh] ...`}>

// 修改后
<div className={`absolute ${!props.isCartDisplayed ? "hidden" : "flex flex-col"} flex justify-between h-[100dvh] ...`}>

2. 添加底部安全区域内边距

针对iPhone、部分安卓设备的底部安全区域（比如小黑条），用env(safe-area-inset-bottom)给按钮容器添加内边距，确保按钮不会被系统UI遮挡：

修改底部按钮容器的样式：

// 原代码
<div className={`${props.totalCartProducts ? "" : "hidden"} border-t-2 mb-auto`}>

// 修改后
<div className={`${props.totalCartProducts ? "" : "hidden"} border-t-2 mb-auto pb-[calc(1rem+env(safe-area-inset-bottom))]`}>

3. 替换fixed布局的滚动禁止方式（可选）

如果用fixed仍有兼容性问题，换成给body添加overflow: hidden的方式，同时记录滚动位置，关闭CartMenu时恢复：

在Products组件中添加逻辑：

import { useEffect, useState } from 'react';

const Products = () => {
  const [isCartDisplayed, setIsCartDisplayed] = useState(false);
  const [scrollPosition, setScrollPosition] = useState(0);

  useEffect(() => {
    if (isCartDisplayed) {
      // 记录当前滚动位置
      setScrollPosition(window.scrollY);
      // 禁止页面滚动
      document.body.style.overflow = 'hidden';
      document.body.style.position = 'fixed';
      document.body.style.width = '100%';
    } else {
      // 恢复滚动
      document.body.style.overflow = '';
      document.body.style.position = '';
      // 回到之前的滚动位置
      window.scrollTo(0, scrollPosition);
    }
  }, [isCartDisplayed]);

  // 其他逻辑...
};

修改后的CartMenu核心代码片段 #

return (
  <div className=''>
    <div className={`absolute ${!props.isCartDisplayed ? "hidden" : "flex flex-col"} bg-black bg-opacity-70 w-full top-0 left-0 bottom-[-200px] z-9`}
         onClick={props.toggleCart}
    > 
    </div>
    <div className={`absolute ${!props.isCartDisplayed ? "hidden" : "flex flex-col"} flex justify-between h-[100dvh] bg-white w-[90%] sm:w-[70%] top-0 right-0 bottom-0 z-10 overflow-hidden`}>
      <div className="border-b-2">
        <div className="flex justify-between items-center mb-2 mt-4">
          <div>
            {props.totalCartProducts > 0 ? (
              <h2 className="text-xl font-bold mx-5">
                Carrito de compras ({props.totalCartProducts}{" "}
                {props.totalCartProducts > 1 ? "productos" : "producto"})
              </h2>
            ) : (
              <h2 className="text-xl font-bold mx-5">Carrito de compras</h2>
            )}
          </div>
          <div className="flex justify-end">
            <img
              src={close}
              onClick={props.toggleCart}
              className="w-10 h-10 mx-5 object-contain cursor-pointer"
              alt="Close"
            />
          </div>
        </div>
      </div>
      <div className="flex flex-col flex-grow overflow-y-auto">
        {cartProductElements}
      </div>
      <div className={`${props.totalCartProducts ? "" : "hidden"} border-t-2 mb-auto pb-[calc(1rem+env(safe-area-inset-bottom))]`}>
        <div className="flex flex-col sm:flex-row gap-2 sm:gap-0 sm:items-center px-5 my-2 justify-between">
          <h3 className="text-lg font-semibold">Total: ${total.toFixed(2)}</h3>
          <button className="flex justify-center items-center gap-2 px-4 pt-3 pb-2 bg-[#25D366] font-semibold rounded-lg text-sm hover:bg-[#128C7E]" onClick={checkout}>
            Continuar compra por WhatsApp
            <img src={whatsapp} alt='whatsappLogo' className='h-5 w-5 mb-1'></img>
          </button>
        </div>
      </div>
    </div>
  </div>
)

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