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;
}
複製程式碼