1.只針對底部高度固定的情況，不能解決底部高度不固定的情況，
原理：主要內容放在page-main裏面，page-container最小高度100%（注意這裏html，body高度也要設爲100%），position爲relative。footer的position爲absolute，相對於page-container居於底部。page-main有個padding-bottom爲footer的高度（根據需要調整），從而達到需求效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.page-container {
position: relative;
min-height: 100%;
}
.header {
height: 200px;
width:100%;
background: #000;
}
.page-main {
padding-bottom: 300px;
background: red;
height: auto;
font-size: 20px;
}
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 300px;
background: aqua;
}
</style>
<body>
<div class="page-container">
<div class="header">
頭部
</div>
<div class="page-main">
主要頁面
<br/> 主要頁面
<br/> 主要頁面
<br/> 主要頁面
<br/> 主要頁面
<br/> 主要頁面
<br/> 主要頁面
<br/> 主要頁面
<br/> 主要頁面
<br/> 主要頁面
<br/> 主要頁面
<br/> 主要頁面
<br/> 主要頁面
<br/>
</div>
<footer>底部</footer>
</div>
</body>
</html>
2.利用flex佈局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
padding: 0;
margin: 0
}
.detail {
/* 因爲是遮罩效果所以要fixed */
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;
background: rgba(7, 17, 27, .8);
/*必須 */
display: flex;
/* 必須，規定元素的排列方向 */
flex-direction: column;
/* 必須佔滿屏 */
height: 100%;
/* 沒有這個就不能滾動了 */
overflow: auto;
}
.detail-header {
width: 100%;
height: 100px;
text-align: center;
/* background: #a3e; */
}
.detail-wrapper {
width: 100%;
/* 佔了百分百-flex:0的佔位 */
flex: 1;
/* background: #143541; */
font-size: 40px;
text-align: center;
}
.detail-close {
/* 佔位用 */
flex: 0;
margin: 0 auto;
/* background: #555555; */
}
</style>
<body>
<div class="detail">
<div class="detail-header">
我是頭部
</div>
<div class="detail-wrapper">
我是內容
<br/> 我是內容
<br/> 我是內容
<br/> 我是內容
<br/> 我是內容
<br/> 我是內容
<br/> 我是內容
<br/> 我是內容
<br/> 我是內容
<br/> 我是內容
<br/> 我是內容
<br/> 我是內容
<br/>
</div>
<div class="detail-close">
我是底部
</div>
</div>
</body>
</html>
現在flex基本都可以兼容其他瀏覽器，所以可以放心使用