经典的圣杯布局

在CSS布局中有一种经典的布局是圣杯布局。

image.png

呐~就是上面图片这样的，左右两边有个耳朵，中间呢是盛水的容器。
在页面上的显示效果就是左右两边是个固定的宽度，中间的容器自适应；即根据页面大小的变化而变化。
在开发中常用来做功能区域的划分。左边是一个导航菜单，右边是广告或者文章的列表，中间是主要的内容显示区域。

下面看看这个布局是怎么实现的；
1.基本的布局结构

<div class="container">
  <div class="middle"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

现在给代码里面添加一些内容：

<div class="container">
  <div class="middle">
      <h4>我是middle</h4>
      <p>我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分</p>
  </div>
  <div class="left">
      <h4>我是left</h4>
      <p>我是left的内容</p>
  </div>
  <div class="right">
      <h4>我是right的内容</h4>
      <p>我是right的内容</p>
  </div>
</div>

再来一些样式代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
*{margin:0;padding:0;}
body{background-color: #cccc;text-align:center;}
header{height:50px;background-color: pink;line-height:50px;}
.container{padding:0 220px 0 200px;}
.middle,.left,.right{
    min-height: 300px;
}
.middle{background-color: red;width:100%;}
.left{width:200px;background-color: yellow;}
.right{width:220px;background-color: blue;}
</style>
</head>
<body>
<header>
<h2>我是header</h2>
</header>
<div class="container">
    <div class="middle">
      <h4>我是middle</h4>
      <p>我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分</p>
    </div>
    <div class="left">
      <h4>我是left</h4>
      <p>我是left的内容</p>
    </div>
    <div class="right">
      <h4>我是right的内容</h4>
      <p>我是right的内容</p>
    </div>
</div>
</body>
</html>

出来的效果是这样的

image.png

看上面的图，我们来分析一下如何让left和right分别到middle的两边去？
现在他们都还是块级元素，所以都是独占一行。圣杯布局要让他们都在一行显示，可以使用display变为inline-block，也可以使用浮动脱离标准流。
这里常用的方式是浮动,修改style中的代码

.middle,.left,.right{
float:left;
min-height: 300px;
}

效果是这样

image.png

设置完浮动发现，怎么成了两行？没有在一行上显示？
因为midlle为了实现自适应的效果，已经设置了width:100%独占了一行，左右两边的空白区域是父容器.container的padding:0 220px 0 200px;
这里怎么能让left和right能到上一行去呢？
这里就考虑到盒子的外边距margin了。给left盒子设置margin-left:-220px;可以保证left盒子能移动到上一行去，但是他是在middle盒子的最右边的部分，要让他移动到最左边就要设置margin-left:-100%;当left盒子上去以后，right盒子设置margin-left:-220px;就能够到上一行的位子去了。

image.png

到了这里基本上的布局已经完成的差不多了，但是左右还是有空白的部分。这时产品发话了让你把左右空白填满，怎么办？使用定位啊~

.middle,.left,.right{
position:relative;
float:left;
min-height: 300px;
}

然后修改left和right这两个盒子的定位属性，让他们分别像左右移动自己盒子的宽度

.left{width:200px;background-color: yellow;margin-left:-100%;left:-200px;}
.right{width:220px;background-color: blue;margin-left:-220px;right:-220px;}

正常窗口

image.png

缩小的窗口

image.png

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style>
    *{margin:0;padding:0;}
    body{background-color: #cccc;text-align:center;}
    header{height:50px;background-color: pink;line-height:50px;}
    .container{padding:0 220px 0 200px;}
    .middle,.left,.right{
        position:relative;
        float: left;
        min-height: 300px;
    }
    .middle{background-color: red;width:100%;}
    .left{width:200px;background-color: yellow;margin-left:-100%;left:-200px;}
    .right{width:220px;background-color: blue;margin-left:-220px;right:-220px;}
    </style>
</head>
<body>
<header>
    <h2>我是header</h2>
</header>
<div class="container">
    <div class="middle">
        <h4>我是middle</h4>
        <p>我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分</p>
    </div>
    <div class="left">
        <h4>我是left</h4>
        <p>我是left的内容</p>
    </div>
    <div class="right">
        <h4>我是right的内容</h4>
        <p>我是right的内容</p>
    </div>
</div>
    
</body>
</html>

经典的圣杯布局

推荐阅读更多精彩内容