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

Question

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

• 那在react中又该怎么做啊

Answer 1

<style>&nbsp; &nbsp; &nbsp; &nbsp; *{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; html,body{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .box{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: aqua;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .content{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 80%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: red;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .btn{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 20%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-top: 5%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; button{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 30%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 50%;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style><div class="box">&nbsp; &nbsp; &nbsp; &nbsp; <div class="content"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="btn">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button>btn</button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>或者 flex,思路是一样的，分成两块就可以了.box{&nbsp; &nbsp; display:flex;&nbsp; &nbsp; flex-firection-column;}.content{&nbsp; &nbsp; flex:1;}.btn{&nbsp; &nbsp; height:100%;}