---
# System prepended metadata

title: HTML將footer置底的方法(使用CSS)
tags: [實作功能]

---

# HTML將footer置底的方法(使用CSS)
###### tags: `實作功能`
[參考網址](https://yichen0831.wordpress.com/2013/08/19/html%E5%B0%87footer%E7%BD%AE%E5%BA%95%E7%9A%84%E6%96%B9%E6%B3%95%E4%BD%BF%E7%94%A8css/)

自己動手做
CSS
```
<style>
    html, body {
        /* 設定body高度為100% 拉到視窗可視的大小 */
        height: 100%;
    }

    #main_wrapper {
        /* 設定高度最小為100%, 如果內容區塊很多, 可以長大 */
        min-height: 100%;
        /* 位置設為relative, 作為footer區塊位置的參考 */
        position: relative;
    }

    #main_header {
        /* 設定header的高度 */
        height: 40px;
        box-sizing: border-box;
    }

    #main_content {
        /* 留出header及footer區塊的空間 */
        padding-top: 40px;
        padding-bottom: 10rem;
    }

    #main_footer {
        /* 設定footer的高度 */
        padding-bottom: 3rem !important;
        padding-top: 3rem !important;
        box-sizing: border-box;
        /* 設定footer絕對位置在底部 */
        position: absolute;
        bottom: 0;
        /* 展開footer寬度 */
        width: 100%;
    }
</style>
```

Html Layout
![](https://i.imgur.com/ktAA596.png)

Footer
![](https://i.imgur.com/wG9Zs9m.png)