经典布局（flex和传统两种实现）—圣杯布局

╰+哭是因爲堅強的太久メ 2022-01-11 11:53 252阅读 0赞

所谓圣杯布局（三栏加页眉页脚）

一张图解释就是

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

### 1.浮动法 ###

> 上中下：定宽定高
> 
> 中间：左中右left浮动且都必须设置宽度  左：margin-left:-100%   右：margin-left:-100px: 中content:margin: 0 180px 0 150px

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .wrap{
              width: 80%;
              margin: 0 auto;
            }
            #header{
              height: 100px;
              background: #66ccff;
            }
            #main{
              height: 500px;
              background: #ffcccc;
            }
            #footer{
              height: 150px;
              background: #99ccff;
            }
    
            #middle{
              width: 100%;
              float: left;
            }
            #left{
              float: left;
              width: 150px;
              height: 100%;
              margin-left: -100%;
              background: #ccffff;
            }
            #right{
              float: left;
              width: 180px;
              height: 100%;
              margin-left: -180px;
              background: #ccffff;
            }
            .content{
              height:500px;
              margin: 0 180px 0 150px
    
            }
        </style>
    </head>
    <body>
    
    <header id="header" class="wrap">#header</header>
    <section id="main" class="wrap">
      <section id="middle">
        <div class="content">content</div>
      </section>
      <aside id="left">left</aside>
      <aside id="right">right</aside>
    </section>
    <footer id="footer" class="wrap">#footer</footer>
     
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

### 2.flex方法 ###

>  上中下：定宽高
> 
> 左中右 ：flex布局 left和right:flex:0 0 200px 中flex 1

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .wrap{
                margin:0 auto;
                width:70%;
            }
            #header{
                height:100px;
                background: #66ccff;
            }
            #main{
                height:500px;
                background: #ffcccc;
                display: flex
            }
            #footer{
                height:100px;
                background: #99ccff;
            }
    
            #middle{
              flex: 1
            }
            #left{
              flex: 0 0 200px;
              background: #ccffff;
              order: -1;
            }
            #right{
              flex: 0 0 200px;
              background: #ccffff;
            }
        </style>
    </head>
    <body>
    
    <header id="header" class="wrap">#header</header>
    <section id="main" class="wrap">
        <section id="middle">#middle</section>
        <aside id="left">#left</aside>
        <aside id="right">#right</aside>
    </section>
    <footer id="footer" class="wrap">#footer</footer>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

### 3.flex阮一峰实现方法 ###

>  上中下也是flex布局，不同的是，总会撑满一屏。因为最外层HolyGrail：min-height: 100vh;

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        .HolyGrail {
          display: flex;
          min-height: 100vh;
          flex-direction: column;
        }
    
        header,
        footer {
          flex: 1;
          background: #ffcccc;
        }
    
        .HolyGrail-body {
          display: flex;
          flex: 0 0 500px;
        }
    
        .HolyGrail-content {
          flex: 1;
          background: red;
        }
    
        .HolyGrail-nav,
        .HolyGrail-ads {
          /* 两个边栏的宽度设为12em */
          flex: 0 0 12em;
          background: #99ccff;
        }
    
        .HolyGrail-nav {
          /* 导航放到最左边 */
          order: -1;
        }
      </style>
    </head>
    
    <body class="HolyGrail">
      <header>...</header>
      <div class="HolyGrail-body">
        <main class="HolyGrail-content">...</main>
        <nav class="HolyGrail-nav">...</nav>
        <aside class="HolyGrail-ads">...</aside>
      </div>
      <footer>...</footer>
    </body>
    
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220110/4639a795adc74cd0927ccd1ec20424cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220110/cde82ca6dd9f46d182554240621f8507.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220110/423db2b2cb4646e5a9349c3b3def151f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3]: /images/20220110/cb157f8e261c49eeaa8b0caa38739fa5.png