css sticky footer布局

应用场景：点击信息，弹出浮层，显示详细信息。浮层最下面有个关闭按钮，一直处在底部，当内容未撑开一页大小时，关闭按钮处在页面最底端。当内容撑开超出一页大小时，按钮随底部内容向下推送且仍然处于最底部。

方法一：min-height+ padding-bottom + margin-top

<div class="wrapper clearfix">
    <div class="content">
      // 这里是页面内容
    </div>  
</div>
<div class="footer">

.wrapper {
    min-height: 100%;
}

.wrapper .content{
    padding-bottom: 50px; /* footer区块的高度 */
}

.footer {
    position: relative;
    margin-top: -50px;  /* 使footer区块正好处于content的padding-bottom位置 */
    height: 50px;
    clear: both;
}

.clearfix::after {
    display: block;
    content: ".";
    height: 0;
    clear: both;
    visibility: hidden;
}

方法二：flex布局

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.content {
    flex: 1;
}
.footer {
    flex: 0;
}