How to make the button on the bottom or a little distance from the bottom of the mobile web page

when doing a mobile web page, you will always encounter the button near the bottom and centered. When there is content, no content, or when the content is full, it is still at the bottom. How to do this

what should I do in react

Mar.02,2021

<style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .box{
            width: 100%;
            height: 100%;
            background-color: aqua;
        }
        .content{
            height: 80%;
            background-color: red;
        }
        .btn{
            height: 20%;
            padding-top: 5%;
            text-align: center;
        }
        button{
            width: 30%;
            height: 50%;
        }
    </style>

<div class="box">
        <div class="content"></div>
        <div class="btn">
            <button>btn</button>
        </div>
    </div>

or flex, is the same idea, just split it into two parts

.box{
    display:flex;
    flex-firection-column;
}
.content{
    flex:1;
}
.btn{
    height:100%;
}

you can use flexbox layouts.

refer to http://f2ex.cn/flexbox-sticky.

Previous: About the execution of load_file () as NULL? in mysql

Next: What does this ruby code mean?