方案1:flex(推荐)
flex是css3提供的一种新的布局方式,这种布局的产生就是为了实现自适应布局,它是随着移动互联网时代产生而引进的。本方案是实现自适应布局的最佳方案。
优点:
简单
维护性好
缺点:
不兼容旧浏览器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.container {
display: flex;
height: 100%;
flex-direction: column;
}
.top {
height: 100px;
background-color: #a9ff29;
}
.middle {
flex: 1;
overflow: auto;
background-color: #ffb91b;
}
.bottom {
height: 50px;
background-color: #40c3ff;
}
</style>
</head>
<body>
<div class="container">
<div class="top">上</div>
<div class="middle">中</div>
<div class="bottom">下</div>
</div>
</body>
</html>
方案2:网格(grid)
网格布局是比较新的东西,这个布局是新的css标准下的特性。在响应式布局大行其道的移动互联网时代,bootstrap之类的是对栅格化布局框架非常流行,而网格布局,就是对栅格布局的标准化实现。
优点
简单、清晰
缺点
不兼容旧浏览器。(因为是新CSS标准的特性)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.container {
display: grid;
height: 100%;
grid-template-rows: 100px auto 50px;;
}
.top {
background-color: #a9ff29;
}
.middle {
background-color: #ffb91b;
}
.bottom {
background-color: #40c3ff;
}
</style>
</head>
<body>
<div class="container">
<div class="top">上</div>
<div class="middle">中</div>
<div class="bottom">下</div>
</div>
</body>
</html>
方案3:vh+calc()
利用css中vh单位和calc() 函数
优点:
简单
兼容旧浏览器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
* {
margin: 0;
padding: 0;
}
.top {
height: 100px;
background-color: #a9ff29;
}
.middle {
height: calc(100vh - 150px);
background-color: #ffb91b;
}
.bottom {
height: 50px;
background-color: #40c3ff;
}
</style>
</head>
<body>
<div class="container">
<div class="top">上</div>
<div class="middle">中</div>
<div class="bottom">下</div>
</div>
</body>
</html>