html - fixed div on mobile 不固定

Question

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

以下 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 不是固定的。我必须滚动到页面底部才能看到它。
有什么线索吗？

Answer 1

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