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