HTML将footer置底的方法(使用CSS)
2018-08-03 本文已影响234人
谢小帅
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>
<!--随内容增多，自动增长-->
</div>
<footer id="id_footer">
Footer Block
</footer>
</div>
</body>
</html>
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;
}
效果
