css 技巧汇总

流式三栏布局，footer自动居底

利用flex布局，footer在内容区高度不够的情况下，也能自动居底。

<div class="wrap">
    <div class="header">
        header
    </div>
    <div class="content">
        content
    </div>
    <div class="footer">
        footer
    </div>
</div>

.wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #d1d1d1;
}

.header{
    background-color:red;
}
.content {
    flex: 1;
    background-color: yellow;
}
.footer{
    background-color: green;
}