stick footer 黏性底部
問題描述
讓底部一直在頁面最下面
解決方案
這種布局就是 stick footer 黏性底部 布局；這裡提供兩種方案實作以及實作的思路；
思路為有一個 min-height:100% 的元素，圍繞這個元素做文章；注意 html 需要設定 height:100%;
方案一：footer絕對定位-并加一層父元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:;
padding:;
box-sizing: border-box;
}
html,body{
height: %;
/*min-height: 100%;*/
min-width: px;
}
body{
font: px/ "Microsoft YaHei", sans-serif;
color: #666666;
background: #e8e8e8;
}
.body{
position: relative;
min-height: %;
height:auto !important;
height:%;//IE6不識别min-height
}
.header{
width: %;
background-color: #f1a899;
height: px;
box-shadow: transparent, transparent, px px #DFDFDF, transparent;
}
.section{
width: px;
margin: auto;
padding: px px;
}
.container{
background: #ffffff;
height:px;
}
.footer{
position: absolute;
bottom: ;
height: px;
width: %;
background: #858B9A;
}
</style>
</head>
<body>
<div class="body">
<div class="header">
header頁面頭部
</div>
<div class="section">
<div class="container">
頁面主體内容
</div>
</div>
<div class="footer">
footer頁面底部
</div>
</div>
</body>
</html>
方案二：footer加負值上邊距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: ;
padding: ;
box-sizing: border-box;
}
html, body {
height: %;
min-height: %;
min-width: px;
}
body {
font: px/ "Microsoft YaHei", sans-serif;
color: #666666;
background: #e8e8e8;
}
.header {
width: %;
background-color: #f1a899;
height: px;
box-shadow: transparent, transparent, px px #DFDFDF, transparent;
}
.section {
min-height: %;
padding: px;
}
.container {
width: px;
height: px;
margin: px auto;
background: #ffffff;
}
.footer {
height: px;
margin-top: -px;
width: %;
background: #858B9A;
}
</style>
</head>
<body>
<div class="section">
<div class="header">
header頁面頭部
</div>
<div class="container">
頁面主體内容
</div>
</div>
<div class="footer">
footer頁面底部
</div>
</body>
</html>
![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)