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基本都可以兼容其他浏览器,所以可以放心使用