在看了很多网上的教程后，真心浮动方法设置圣杯布局十分心累，最后整理两个十分简单好用的方法，供大家参考
圣杯布局要求
- header和footer各自占领屏幕所有宽度，高度固定。
- 中间的container是一个三栏布局。
- 三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
- 中间部分的高度是三栏中最高的区域的高度。
- 圣杯布局中的难点就是中间三列的样式设置（固定宽度+自适应+固定宽度）
dispaly：table & table-cell
- header和footer设置样式，横向撑满。
- container中的left、center、right依次排布即可
- 给container设置display: table;和width：100%
- left和right区域定宽，center设置 width:100%; 同时三个都设置display：table-cell;
<!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>圣杯布局</title>
<style>
#header,
#footer {
height: 100px;
background-color: lightsalmon;
text-align: center;
line-height: 100px;
}
#container {
display: table;
width: 100%;
table-layout: fixed;
}
#left,
#center,
#right {
height: 300px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
#left {
background-color: green;
width: 300px;
}
#center {
background-color: hotpink;
}
#right {
background-color: yellow;
width: 300px;
}
</style>
</head>
<body>
<div id="header">固定行：头部</div>
<div id="container">
<div id="left">固定列：左边</div>
<div id="center">固定列：中间</div>
<div id="right">自适应列：右边</div>
</div>
<div id="footer">固定行：尾部</div>
</body>
</html>
这个方法在多列布局中有奇效
- 如果table-cell的元素不全部设置了固宽，可以实现固宽和自适应宽度完美在一行。
- 如果table-cell的元素都不设置，可以默认等分布局
flex 大法
- header和footer设置样式，横向撑满。
- container中的left、center、right依次排布即可
- 给container设置弹性布局 display: flex;
- left和right区域定宽，center设置 flex: 1; 即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
body {
min-width: 550px;
font-weight: bold;
font-size: 20px;
}
#header, #footer {
background: rgba(29, 27, 27, 0.726);
text-align: center;
height: 60px;
line-height: 60px;
}
#container {
display: flex;
}
#container .column {
text-align: center;
height: 300px;
line-height: 300px;
}
#center {
flex: 1;
background: rgb(206, 201, 201);
}
#left {
width: 200px;
background: rgba(95, 179, 235, 0.972);
}
#right {
width: 150px;
background: rgb(231, 105, 2);
}
</style>
<body>
<div id="header">#header</div>
<div id="container">
<div id="left" class="column">#left</div>
<div id="center" class="column">#center</div>
<div id="right" class="column">#right</div>
</div>
<div id="footer">#footer</div>
</body>
</html>