圣杯布局是什么:
- 圣杯布局是两边固定宽度,中间自适应的三栏布局。
- 中间栏放到文档流前面,先行渲染。
- 目的是为了解决三栏布局。
浮动实现:
实现效果:
首先HTML:
- 头部
<header></header>
标签, - 内容区域
<div class="container"></div>
里面包含中、左、右三个 div 标签。 - 底部
<footer></footer>
标签
HTML代码:
//标题
<header><h4>Header内容区</h4></header>
//内容区
<div class="container">
//中间区域
<div class="middle column">
<h4>中间区域</h4>
<p>圣杯布局要求header和footer各自占领屏幕所有宽度,高度固定
中间的container是一个三栏布局
三栏布局两侧宽度固定不变,中间部分自动填充整个区域
中间部分的高度是三栏中最高的区域的高度
</p>
</div>
//左边区域
<div class="left column">
<h4>左边栏</h4>
</div>
//右边区域
<div class="right column">
<h4>右边栏</h4>
</div>
//清除浮动
<div style="clear: both"></div>
</div>
//底部
<footer><h4>Footer内容区</h4></footer>
CSS代码:
-
首先我们设置中间三栏 中、左、右三个div浮动。
-
我们设置中间
<div class="middle"></div>
的css宽度为100%占满整个大div,那么此时左右div块会被挤到下方去。(如下图所示)
-
此时我们要设置外层内容区域的div左右padding以便给左右div回来时候一个位置。(效果如下图所示)
-
接下来我们要使左边栏回到上一行我们要给
<div class="left"></div>
一个相对定位(相对于其正常位置进行定位)position:relative
和margin-left:-100%
(为什么是100%?因为设置100%后它可以刚好和middle中间栏的左侧对齐);
-
我们要给
<div class="left"></div>
添加right: 200px;
样式属性使其回到第一行的最左侧。
-
相同原理我们给右栏一个
margin-right: -150px;
使其回到原来位置,那么这个布局就完成啦。
*{
margin: 0;
padding: 0;
}
body{
min-width: 550px;
}
header{
height: 40px;
background-color: #50a0c3;
padding-top: 10px;
text-align: center;
line-height: 40px;
color: white;
}
.container{
padding-left: 200px;
padding-right: 150px;
}
.column{
float: left;
}
.middle{
width: 100%;
height: 350px;
background-color: salmon;
text-align: center;
padding-top: 50px;
}
.left{
width: 200px;
height: 400px;
background-color: #d8e6a4;
margin-left: -100%;
position: relative;
right: 200px;
text-align: center;
line-height: 400px;
}
.right{
width: 150px;
height: 400px;
margin-right: -150px;
text-align: center;
line-height: 400px;
background-color: #bed28c;
}
footer{
width: 100%;
height: 40px;
background-color: #5b6063;
text-align: center;
line-height: 40px;
}