フッターを固定する

<div class="container100">

<div class="contents100">
<p>
文章
</p>
</div>

<div class="footer100">
footer:150px
</div>
</div>

.container100{
min-height: 100vh;
display: flex;
flex-direction: column;
}

.contents100{
flex: 1;
max-width:800px;
margin:0 auto;
padding:10px;
}

.footer100{
height: 150px;
text-align:center;
color:#ffffff;
background:#000000;
}

勉強させてもらったサイト

• floatより辛くない「flexbox」でざっくりレイアウト – Qiita