圣杯布局的三种实现 #19

bigggge · 2018-05-31T03:08:30Z

圣杯布局是典型的 CSS 布局问题，有着众多的解决方案。

圣杯布局由页头 (header)，中间部分 (center)，页脚 (footer)，和三栏组成。中间的一栏是主要内容，左边和右边提供如广告、导航的链接。圣杯布局和淘宝提出的双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局。中间栏要在放在文档流前面以优先渲染。

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部 float 浮动，但左右两栏加上负 margin 让其跟中间栏并排，以形成三栏布局。

不同点是双飞翼布局是通过新建的 div 的外边距隔离各列，而圣杯布局则是通过父容器的内边距来实现各列的间隙。

圣杯布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>圣杯布局</title>
    <style>
      .wrapper {
        padding: 0 100px 0 100px;
        color: #fff;
        /*触发BFC清除浮动*/
        overflow: hidden;
      }

      .col {
        position: relative;
        float: left;
      }

      header {
        height: 50px;
        background-color: #666;
        color: #fff;
      }

      .main {
        width: 100%;
        height: 200px;
        background-color: #555;
      }

      .left {
        width: 100px;
        height: 200px;
        margin-left: -100%;
        left: -100px;
        background-color: #999;
      }

      .right {
        width: 100px;
        height: 200px;
        margin-left: -100px;
        right: -100px;
        background-color: #999;
      }

      footer {
        height: 50px;
        background-color: #666;
        color: #fff;
      }

    </style>
  </head>
  <body>
    <header>header</header>
    <section class="wrapper">
      <section class="col main">main</section>
      <aside class="col left">left</aside>
      <aside class="col right">right</aside>
    </section>
    <footer>footer</footer>
  </body>
</html>`

双飞翼布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
      .wrapper {
        color: #fff;
        overflow: hidden;
      }

      .col {
        float: left;
      }

      header {
        height: 50px;
        background-color: #666;
        color: #fff;
      }

      .main {
        width: 100%;
        background-color: #555;
      }

      .main-wrap {
        margin: 0 100px 0 100px;
        height: 200px;
      }

      .left {
        width: 100px;
        height: 200px;
        margin-left: -100%;
        background-color: #999;
      }

      .right {
        width: 100px;
        height: 200px;
        margin-left: -100px;
        background-color: #999;
      }

      footer {
        height: 50px;
        background-color: #666;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <header>header</header>
    <section class="wrapper">
      <section class="col main">
        <section class="main-wrap">main</section>
      </section>
      <aside class="col left">left</aside>
      <aside class="col right">right</aside>
    </section>
    <footer>footer</footer>
  </body>
</html>

Flexbox 实现

随着 Flexbox 布局的普及，圣杯布局的最佳解决方案终于成为可能。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>圣杯Flexbox布局</title>
    <style>
      .wrapper {
        display: flex;
        flex: 1;
        height: 200px;
        color: #fff;
      }

      .main {
        flex: 1;
        background-color: #555;
      }

      header, footer {
        height: 50px;
        background-color: #666;
      }

      .left {
        order: -1;
        background-color: #999;
        flex: 0 0 100px;
      }

      .right {
        background-color: #999;
        flex: 0 0 100px;
      }

    </style>
  </head>
  <body>
    <header>header</header>
    <div class="wrapper">
      <section class="main">main</section>
      <aside class="left">left</aside>
      <aside class="right">right</aside>
    </div>
    <footer>footer</footer>
  </body>
</html>

bigggge added HTML CSS labels May 31, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

圣杯布局的三种实现 #19

圣杯布局的三种实现 #19

bigggge commented May 31, 2018

圣杯布局的三种实现 #19

圣杯布局的三种实现 #19

Comments

bigggge commented May 31, 2018

圣杯布局

双飞翼布局

Flexbox 实现