avatar

ThalliMega's Blog

Home

使用flex實現頁底footer

需求

如果頁面高度不足1屏,footer放至頁底;否則footer按正常文檔流放置。

實現


    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        margin: 0;
    }
    
    footer {
        display: flex;
        justify-content: center;
        align-items: end;
        flex-grow: 1;
        margin-bottom: 2vh;
        margin-top: 4vh;
    }