手机上的固定div不固定答案

【问题标题】：Fixed div on mobile is not fixed手机上的固定div不固定
【发布时间】：2021-04-28 02:16:46
【问题描述】：

我需要在屏幕底部固定一个操作栏。

以下 CSS 在桌面模式下运行良好：

        <div class="slds-p-around--large actions">

            <lightning-button-stateful
                    label-when-off="Check All"
                    label-when-on="Uncheck All"
                    label-when-hover="Uncheck All"
                    icon-name-when-off="utility:check"
                    icon-name-when-on="utility:close"
                    icon-name-when-hover="utility:close"
                    selected={selected}
                    onclick={handleMasterSelection}>
            </lightning-button-stateful>

            <button class="slds-button slds-button--success" onclick={handleApprove}>Approve</button>
            <button class="slds-button slds-button--destructive" onclick={showConfirmationModal}>Deny</button>
        </div>

.actions{
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #F3F2F2;
    left: 0;
    display: block;
    height: 8vh;
    z-index: 10000;
}

但在移动模式下它不起作用，div 不固定。我必须滚动到页面底部才能看到它。
有什么线索吗？

【问题讨论】：

你能分享剩下的代码或JS小提琴来测试它
发布与您提供的 css 代码相关联的 html 代码
移除左侧属性并再次测试
感谢您的回答。我更新了 html 代码。移除 left 属性并没有改变任何东西。
你所拥有的是完美地在不同的屏幕上工作，尝试删除主 div 的其他类名，看看它们是否影响它，我测试了你所拥有的，它适用于移动和桌面

标签： html css mobile

【解决方案1】：

只需更改 background-color: #000; 并删除 left: 0; 即可。

【讨论】：

感谢您的回答，我只是按照您的建议进行了编辑，但它不起作用，行为是一样的
其他一些类导致了问题。您必须通过jsfiddle.net分享完整代码
它不能在 JS Fiddle 上工作，因为我使用了 JSFiddle 不支持的 Web 组件框架
见这里jsfiddle.net/ujjawalpoonia/dx0uLszc 它工作正常。所以其他一些类导致了这个问题。
好的，谢谢你的回答，所以我认为错误来自框架的上下文

【解决方案2】：

问题是由 Salesforce 的移动应用 Web 容器引起的，其自定义滚动阻止 position: fixed 正常工作。

经过彻底调查，我发现问题是由 Salesforce 的移动应用程序 Web 容器引起的，该容器不使用原生窗口滚动，而是在向下滑动事件时使用类似 translate3d 的 CSS 翻译内容。

我不知道他们为什么这样做，因为它破坏了位置：固定 CSS 等等。

我找到的解决方法如下：设置类似

max-height : 90vh ; // Can be changed to suit the size you want your « fixed » element to have left
overflow-y : scroll ;

在您的页面内容上，让您的内容滚动而不滚动页面本身。然后你可以把你想要固定的内容放在内容的顶部或底部，这将模仿固定位置的行为。

【讨论】：