爱站程序员基地CSS3圣杯布局
圣杯布局：左右两列宽度固定，中间列自适应。圣杯布局，是学习css3后，常见的布局之一。
窗口最大化示例：
窗口缩小后，两边宽度不变，中间缩小：
源码
先设置一个头部，中间，底部。中间又分为左中右三部分。
<div class=\'container\'><header>头部</header><section><div class=\'left\'>左</div><div class=\'center\'>中</div><div class=\'right\'>右</div></section><footer>底部</footer></div>
添加css样式
* {margin: 0;padding: 0; //清除浏览器的内外边距}.container {display: flex;height: 100vh;flex-direction: column; //设置 <div> 元素内弹性盒元素的方向}header {background: #888888; //头部加一个背景颜色}section {flex: 1; //让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容：background: pink;display: flex;}footer {background: #ccc;}.left {background: orangered;flex: 0 0 100px; //flex-grow: 0; flex-shrink: 0; flex-basis: 100px;}.center {flex: 1; //flex-grow: 1; flex-shrink: 1; flex-basis: 0%;background: skyblue;}.right {flex: 0 0 100px; //flex-grow: 0; flex-shrink: 0; flex-basis: 100px;background: orange;}
以上就是圣杯布局的基本样式了
最后合并代码
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>圣杯布局</title><style>* {margin: 0;padding: 0;}.container {display: flex;height: 100vh;flex-direction: column;}header {background: #888888;}section {flex: 1;background: pink;display: flex;}footer {background: #ccc;}.left {background: orangered;flex: 0 0 100px;}.center {flex: 1;background: skyblue;}.right {flex: 0 0 100px;background: orange;}</style></head><body><div class=\'container\'><header>头部</header><section><div class=\'left\'>左</div><div class=\'center\'>中</div><div class=\'right\'>右</div></section><footer>底部</footer></div></body></html>
