HTML將footer置底的方法(使用CSS) - Web Development Notes
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="2.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="id_wrapper">
<div id="id_header">
Header Block
</div>
<div id="id_content">
Content Block<br>
Content Block<br>
Content Block<br>
Content Block<br>
Content Block<br>
Content Block<br>
Content Block<br>
Content Block<br>
<!--隨內(nèi)容增多，自動增長-->
</div>
<footer id="id_footer">
Footer Block
</footer>
</div>
</body>
</html>
css
* {
margin: 0;
}
html, body {
/* 設(shè)定body高度為100% 拉到視窗可視的大小 */
height: 100%;
}
#id_wrapper {
/*設(shè)定高度最小為100%, 如果內(nèi)容區(qū)塊很多, 可以長大！*/
min-height: 100%;
position: relative; /*位置relative, 作為footer位置的參考*/
text-align: center;
}
#id_header {
height: 40px;
line-height: 40px;
background-color: red;
}
#id_content {
/* 留出header及footer區(qū)塊的空間*/
padding-top: 40px;
padding-bottom: 40px;
background-color: #2aabd2;
}
#id_footer {
height: 40px; /*設(shè)定footer高度*/
position: absolute; /*設(shè)定footer絕對位置在底部*/
bottom: 0;
width: 100%; /*展開footer寬度*/
background-color: yellow;
line-height: 40px;
}
效果
