圣杯布局 - float flex grid

圣杯布局

特点

• 1、上部和下部各自占领屏幕所有宽度
• 2、上下部之间的部分是一个三栏布局
• 3、三栏布局两侧宽度不变，中间部分自动填充整个区域,中间盒子优先渲染
• 4、中间部分的高度是三栏中最高的区域的高度

下面列出三种实现方法：float flex grid
3行的高度设为： 40px 300px 40px
三栏布局的左右侧宽度：200px 150px

1. float实现(为了优先渲染center放在left前面)

<div class="container">
  <div class="header">header</div>
  <div class="middle">
    <div class="center">center
      1、上部和下部各自占领屏幕所有宽度
      2、上下部之间的部分是一个三栏布局
      3、三栏布局两侧宽度不变，中间部分自动填充整个区域,中间盒子优先渲染
      4、中间部分的高度是三栏中最高的区域的高度
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
  <div class="footer">footer</div>
</div>

center部分的宽度用calc:

.container {
  min-width: 550px;
}
.header, .footer {
  height: 40px;
  line-height: 40px;  /* 垂直居中 */
  text-align: center; /* 水平居中 */
  background-color: grey;
}
.middle {
  height: 300px;
}
.left {
  float: left;
  width: 200px;
  height: 300px;
  margin-left: -100%;
  background-color: khaki;
}
.center {
  float: left;
  width: calc(100% - 200px - 150px);
  height: 300px;
  margin-right: 150px;
  margin-left: 200px;
  background-color: seagreen;
}
.right {
  float: left;
  width: 150px;
  height: 300px;
  margin-left: -150px;
  background-color: rgb(212, 148, 8);
} 

center部分的宽度不用calc，设为100%:为了中间部分的字体不被遮挡，三栏布局增加position: relative

.container {
  min-width: 550px;
}
.header, .footer {
  height: 40px;
  line-height: 40px;  /* 垂直居中 */
  text-align: center; /* 水平居中 */
  background-color: grey;
}
.middle {
  /* height: calc(100% - 40px * 2);  middle会显示高度为0，而且三栏的高度不等*/
  height: 300px;
  padding-left: 200px;
  padding-right: 150px;
  /* 或者 margin-left: 200px;
  margin-right: 150px; */
}
.left {
  float: left;
  width: 200px;
  height: 300px;
  margin-left: -100%;
  left: -200px;
  position: relative;
  background-color: khaki;
}
.center {
  float: left;
  width: 100%;
  height: 300px;
  background-color: seagreen;
}
.right {
  float: left;
  width: 150px;
  height: 300px;
  margin-left: -150px;
  right: -150px;
  position: relative;
  background-color: rgb(212, 148, 8);
}

2. flex实现(center不放在left前面)

<div class="container">
  <div class="header">header</div>
  <div class="middle">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
  </div>
  <div class="footer">footer</div>
</div>

.container {
  min-width: 550px;
}
.header, .footer {
  height: 40px;
  line-height: 40px;  /* 垂直居中 */
  text-align: center; /* 水平居中 */
  background-color: grey;
}
.middle {
  height: 300px;
  line-height: 300px;
  text-align: center;
  display: flex;
}
.left {
  width: 200px;
  height: 300px;
  background-color: khaki;
}
.center {
  flex: 1; /* 或者 width: calc(100% - 200px - 150px); */
  height: 300px;
  background-color: seagreen;
}
.right {
  width: 150px;
  height: 300px;
  background-color: rgb(212, 148, 8);
}

3. grid实现(center不放在left前面)

<div class="container">
  <div class="header">header</div>
  <div class="left middle">left</div>
  <div class="center middle">center
    1、上部和下部各自占领屏幕所有宽度
    2、上下部之间的部分是一个三栏布局
    3、三栏布局两侧宽度不变，中间部分自动填充整个区域,中间盒子优先渲染
    4、中间部分的高度是三栏中最高的区域的高度
  </div>
  <div class="right middle">right</div>
  <div class="footer">footer</div>
</div>

.container {
  min-width: 550px;
  display: grid;
  grid-template-columns: 200px 1fr 150px;  /* 定义列的宽度,总共分成3列，fr这个单位表示网格中剩余的全部空间 */
  grid-template-rows: 40px 300px 40px;     /* 定义行的宽度 */
}
.header, .footer {
  line-height: 40px;  /* 垂直居中 */
  text-align: center; /* 水平居中 */
  background-color: grey;
  /* grid-row: 1; 第一行网格 */
  grid-column: 1/4;  /* 从第一条列网格线开始到第四条列网格线结束 */
}
.left {   
  background-color: khaki;
}
.center {
  background-color: seagreen;
}
.right {
  background-color: rgb(212, 148, 8);
}