html插入内容自动置底,HTML将footer置底的方法(使用CSS)

html

Title

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;

}

效果