HTML将footer置底的方法(使用CSS)

HTML將footer置底的方法(使用CSS) - Web Development Notes

html

    
    
    



    

        Header Block
    
    

        Content Block

        Content Block

        Content Block

        Content Block

        Content Block

        Content Block

        Content Block

        Content Block

        
    
    

        Footer Block
    

css

* {
    margin: 0;
}

html, body {
    /* 设定body高度为100% 拉到视窗可视的大小 */
    height: 100%;
}

#id_wrapper {
    /*设定高度最小为100%, 如果內容区块很多, 可以长大！*/
    min-height: 100%;
    position: relative; /*位置relative, 作为footer位置的参考*/
    text-align: center;
}

#id_header {
    height: 40px;
    line-height: 40px;
    background-color: red;
}

#id_content {
    /* 留出header及footer区块的空间*/
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #2aabd2;
}

#id_footer {
    height: 40px; /*设定footer高度*/
    position: absolute; /*设定footer绝对位置在底部*/
    bottom: 0;
    width: 100%; /*展开footer宽度*/
    background-color: yellow;
    line-height: 40px;
}

效果