css如何让按钮始终在底部并且不遮挡内容

css如何让按钮始终在底部并且不遮挡内容

html:

<div class="bottom_btns">
        <div class="export">导出</div>
        <div class="print">打印</div>
    </div>

css:

    .bottom_btns {
        width: 100%;
        height: 2rem;
        display: flex;
        //  margin-top: 0.3rem;
        // position: absolute;
        // bottom: 0;
        align-items: flex-end;
        position: fixed;
        bottom: 0;
        z-index: 999;

        .export {
            height: 50%;
            width: 100%;
            background-color: red;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 0.3rem;
        }

        .print {
            height: 50%;
            width: 100%;
            background-color: #5172F3;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 0.3rem;
        }
    }

为该固定在底部的div设置一个height、 margin-bottom: 2rem;