简介
本文用示例介绍CSS三行布局的方案。
三行布局，即：上、中、下。有两种方案：1.上下固定，中间自适应；2.中间固定，上下自适应。本文介绍第1种方案。
两边固定，中间自适应，一共有如下几种方案：
- flex布局（推荐）
- 网格布局（grid)
- vh+calc()
- 表格布局（table）（不推荐）
- 绝对定位布局（不推荐）
上下固定，中间自适应，就意味着中间要占满（高度铺满）。所以大部分方案中，其父元素都要设置：height: 100%。
想要达到的效果：
下边所有的方案的结果都跟上图一样。
方案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>
方案4：表格(table)(不推荐)
简介
把三行都看做是表格，控制表格的显示情况即可。
优点
- 简单
- 兼容旧浏览器（因为表格是兼容旧浏览器的）
缺点
- 不灵活。（边框设置、高度设置等等都有很大受限）
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body, .container {
height: 100%;
width: 100%;
}
.container {
display: table;
}
.container>div{
display: table-row;
}
.top {
height: 100px;
background-color: #a9ff29;
}
.middle {
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>
方案5：绝对定位(不推荐)
优点
- 兼容旧浏览器
- 简单
缺点
- 脱离文档流，可维护性很差
示例
代码
<!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>div {
position: absolute;
width: 100%;
}
.top {
top: 0;
height: 100px;
background-color: #a9ff29;
}
.middle {
top: 100px;
bottom: 50px;
background-color: #ffb91b;
}
.bottom {
bottom: 0;
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>
