Css 当用户向下滚动时，React手机的全屏背景视频在底部有额外的空间

对于移动屏幕，是否需要处理高度：100vh（或更换）

我尝试过使用

填充可用

，

-webkit填充可用

，但似乎不起作用

另外，

html，body{height:100%；}

包含在index.css中

供参考的图片：

应该发生什么

---

实际发生的情况（用户不能向下滚动，因为背景应该是全屏的）

---

这是屏幕截图可能出现的情况之一helpful@Jhecht补充。用户不能向下滚动

<section
    style={{
        position: `relative`,
        height: `100%`,
        height: `-moz-available`,
        height: `-webkit-fill-available`,
        height: `fill-available`,
        minHeight: `100vh`,
        width: `100%`,
        zIndex: `-1`,
        overflow: `hidden`,
    }}
>
    <video 
        autoPlay
        loop                  
        muted
        playsInline
        style={{
            position: `absolute`,
            left: `50%`,
            top: `50%`,
            transform: `translate(-50%,-50%)`,
            width: `auto`,
            height: `auto`,
            minHeight: `100%`,
            minWidth: `100%`,
        }}
    >
        <source src={VideoBG} type="video/mp4" />
    </video>
</section>