html 圣杯布局,第18题 CSS如何进行圣杯布局

圣杯布局如图:

而且要做到左右宽度固定，中间宽度自适应。

首先我们把公共的HTML和CSS代码附上，以下方法中都可使用，不做重复工作。

公共HTML代码：

这里是头部

左边

中间部分

右边

这里是底部

公共CSS代码：

*{

margin: 0;

padding: 0;

}

.header,.footer{

height:40px;

width:100%;

background:red;

}

1. 利用flex布局

CSS代码：

.container{

display: flex;

}

.middle{

flex: 1;

background:yellow;

}

.left{

width:200px;

background:pink;

}

.right{

background: aqua;

width:300px;

}

2.绝对定位

.container{

min-height: 1.2em;

position: relative;

}

.container>div {

position: absolute;

}

.middle {

left: 200px;

right: 250px;

background: yellow;

}

.left {

left: 0;

width: 200px;

background: pink;

}

.right {

right: 0;

width: 250px;

background: aqua;

}

3. grid布局

HTML代码：

header

left

middle

right

footer

CSS代码：

body{

display: grid;

}

#header{

background: red;

grid-row:1;

grid-column:1/5;

}

#left{

grid-row:2;

grid-column:1/2;

background: orange;

}

#right{

grid-row:2;

grid-column:4/5;

background: cadetblue;

}

#middle{

grid-row:2;

grid-column:2/4;

background: rebeccapurple

}

#footer{

background: gold;

grid-row:3;

grid-column:1/5;

}

看看grid布局，其实也挺简单的吧，里面的参数应该不言而喻了。另外我之前也写过一篇关于grid布局文章：CSS Grid网格布局实例教程，感兴趣的小伙伴可以看一下。

另外说一点，到2019年为止，grid现在绝大多数浏览器已经可以兼容了，可以着手使用了。

当然，还有table布局，年代比较久远了，而且对SEO不友好，知道就可以，这里就不浪费篇幅了。