1、效果展示
2、源码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,body,.page {
height: 100%;
overflow:hidden;
}
.header{
text-align: center;
position: absolute;;
left: 0;
right: 0;
top: 0;
height: 55px;
line-height: 55px;
background-color: rgb(0, 162, 255);
}
.height30 {
height: 60px;
}
.content {
position:absolute;
left: 0;
right: 0;
top: 55px;
bottom: 55px;
overflow-y: scroll;
}
.footer {
text-align: center;
position:absolute;
left: 0;
right: 0;
bottom: 0;
height: 55px;
line-height: 55px;
background-color: rgb(0, 195, 255);
}
</style>
</head>
<body>
<div class="page">
<div class="header">title</div>
<div class="content">
<div class="height30">1</div>
<div class="height30">2</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
下面改进一下，使用flex布局优化下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,body,.page {
height: 100%;
overflow:hidden;
}
body {
margin: 0;
}
.page {
display: flex;
flex-direction: column;
}
.header{
text-align: center;
height: 55px;
line-height: 55px;
background-color: rgb(0, 162, 255);
}
.height30 {
height: 60px;
}
.content {
overflow-y: scroll;
}
.footer {
text-align: center;
height: 55px;
line-height: 55px;
background-color: rgb(0, 195, 255);
}
</style>
</head>
<body>
<div class="page">
<div class="header">title</div>
<div class="content">
<div class="height30">1</div>
<div class="height30">2</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
<div class="height30">3</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
