CSS 经典布局——圣杯布局

效果图

通过缩放页面，随着页面的宽度的变化，这三栏布局是中间盒子优先渲染，两边的盒子框子宽度固定不变，即使页面宽度变小，也不影响我们的浏览。注意：为了安全起见，最好还是给body加一个最小宽度!

圣杯布局要求

| - header 和 footer 各自占领屏幕所有宽度，高度固定。

中间的container是一个三栏布局。
三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
中间部分的高度是三栏中最高的区域的高度。 |

圣杯布局的三种实现

一、浮动

先定义好 header 和 footer 的样式，使之横向撑满。
在 container 中的三列设为浮动和相对定位(后面会用到)，center要放在最前面，footer清除浮动。
三列的左右两列分别定宽200px和150px，中间部分center设置 100% 撑满
这样因为浮动的关系，center会占据整个container，左右两块区域被挤下去了
接下来设置left的 margin-left: -100%;，让left回到上一行最左侧
但这会把center给遮住了，所以这时给外层的container设置 padding-left: 200px; padding-right: 150px;给left和right空出位置
这时 left 并没有在最左侧，因为之前已经设置过相对定位，所以通过 left: -200px;把left拉回最左侧
同样的，对于right区域，设置 margin-left: -150px; 把right拉回第一行
这时右侧空出了150px的空间，所以最后设置 right: -150px;把right区域拉到最右侧就行了。

xml 复制代码

html
复制代码
<style>
  body {
    min-width: 550px;  /* 2x leftContent width + rightContent width */
    font-weight: bold;
    font-size: 20px;
  }
 
  #header, #footer {
    background: rgba(29, 27, 27, 0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #footer {
    clear: both;
  }
 
  #container {
    padding-left: 200px;   /* leftContent width */
    padding-right: 150px;  /* rightContent width */
    overflow: hidden;
  }
 
  #container .column {
    position: relative;
    float: left;
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
 
  #center {
    width: 100%;
    background: rgb(206, 201, 201);
  }
 
  #left {
    width: 200px;           /* leftContent width */
    right: 200px;           /* leftContent width */
    margin-left: -100%;
    background: rgba(95, 179, 235, 0.972);
  }
 
  #right {
    width: 150px;           /* rightContent width */
    margin-left: -150px;   /* rightContent width */
    right: -150px;
    background: rgb(231, 105, 2);
  }
 
</style>
 
<body>
  <div id="header">#header</div>
  <div id="container">
    <div id="center" class="column">#center</div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
  </div>
  <div id="footer">#footer</div>
</body>

二、flex 弹性盒子

header 和 footer 设置样式，横向撑满。
container 中的 left、center、right 依次排布即可
给 container 设置弹性布局 display: flex;
left 和 right 区域定宽，center 设置 flex: 1; 即可

xml 复制代码

html
复制代码
<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>

三、 grid 布局

如上图所示，我们把body划分成三行四列的网格，其中有5条列网格线

给 body 元素添加display: grid;属性变成一个grid(网格)
给 header 元素设置grid-row: 1; 和 grid-column: 1/5; 意思是占据第一行网格的从第一条列网格线开始到第五条列网格线结束
给 footer 元素设置grid-row: 1; 和 grid-column: 1/5; 意思是占据第三行网格的从第一条列网格线开始到第五条列网格线结束
给 left 元素设置grid-row: 2; 和 grid-column: 1/2; 意思是占据第二行网格的从第一条列网格线开始到第二条列网格线结束
给 center 元素设置grid-row: 2; 和 grid-column: 2/4; 意思是占据第二行网格的从第二条列网格线开始到第四条列网格线结束
给 right 元素设置 grid-row: 2; 和 grid-column: 4/5; 意思是占据第二行网格的从第四条列网格线开始到第五条列网格线结束

xml 复制代码

html
复制代码
<style>
  body {
    min-width: 550px;
    font-weight: bold;
    font-size: 20px;
    display: grid;
  }
  #header,
  #footer {
    background: rgba(29, 27, 27, 0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #header {
    grid-row: 1;
    grid-column: 1/5;
  }
  #footer {
    grid-row: 3;
    grid-column: 1/5;
  }
  .column {
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
  #left {
    grid-row: 2;
    grid-column: 1/2;
    background: rgba(95, 179, 235, 0.972);
  }
  #center {
    grid-row: 2;
    grid-column: 2/4;
    background: rgb(206, 201, 201);
  }
  #right {
    grid-row: 2;
    grid-column: 4/5;
    background: rgb(231, 105, 2);
  }
</style>
 
<body>
  <div id="header">#header</div>
  <div id="left" class="column">#left</div>
  <div id="center" class="column">#center</div>
  <div id="right" class="column">#right</div>
  <div id="footer">#footer</div>
</body>

原文链接 ：CSDN博主「木头房子的格子铺」