Footer 置底

CSS Sticky Footer.
避免螢幕太長、內容不足而看到html後面的白色背景。
也可以應用在需要置底的按鈕結構。

・ Html

<div class="warp">
    ...
</div>
<div class="footer"></div>

・ SCSS

html, body{
    height: 100%;
}
.warp{
    padding-bottom: 80px;
    overflow: auto;
    min-height: 100%;
    @include box-sizing(border-box);
}

.footer{
    height: 80px;
    margin-top: -80px;
    position: relative;
}

Comment