移动端网页怎么让按钮在底部，或者与底部有少许距离

Question

在做移动端网页时，总会遇到按钮靠近底部并居中，有内容，无内容，或内容充满时，它还在底部，请问这怎么做的那在react中又该怎么做啊

Answer 1

<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>

或者 flex,思路是一样的，分成两块就可以了

.box{

    display:flex;

    flex-firection-column;

}

.content{

    flex:1;

}

.btn{

    height:100%;

}