css布局 - 常規上中下分左右布局的一百種實現方法（更新中...）

一、 上中下左固定 - fixed+margin

概括：如圖，此種布局就是頂部、底部和左側固定不動，只有中間右側超出可滾動。

html：

<header>我是頭部position: fixed;z-index: 9;</header>
    <section class="flexModal fixedLeft">
      <nav>
        <ul>
          <li>section.flexModal nav ul>li*5</li>
          <li>欄目一</li>
          <li>欄目二</li>
          <li class="active">欄目三</li>
          <li>欄目四</li>
          <li>欄目五</li>
        </ul>
      </nav>
      <article>
        <h3>
          內容區域 section.flexModal articel
        </h3>
        <p>
          section{
            padding: 60px 0;
          }
        </p>
        <p> 
          section.flexModal{
            display: flex;
          }
        </p>
        <p> 
          section.flexModal nav{
            width: 200px;
          }
        </p>
        <p> 
          section.flexModal article{
            flex: 1;
          }
        </p>
      </article>
    </section>
    <footer>底部版權同頭部 position: fixed;z-index: 9;</footer>

css：

body,ul,li{
  /* position: relative; */
  margin: 0;
  padding: 0;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  list-style: none;
}
header,footer{
  position: fixed;
  z-index: 9;
  width: 100%;
  height: 60px;
  font-size: 24px;
  color: #333;
  font-weight: bold;
  text-align: center;
  line-height: 60px;
  background: #77d677;
}
footer{
  bottom: 0;
}
section{
  padding: 60px 0;
}
nav{
  background: #93f393;
  color: #333;
}
nav li{
  padding: 10px 20px;
}
nav li.active{
  background: #77d677;
}
article{
  padding: 20px;
  font-size: 24px;
  text-align: center;
  background: #d9ffd9;
  height: 2500px;
}
/* default */
section.default nav{
  position: absolute;
  top: 60px;
  bottom: 60px;
  /* float: left;
  height: 100%; */
  width: 200px;
}
section.default nav li{
  padding: 10px 20px;
}
section.default nav li.active{
  background: #77d677;
}
section.default article{
  padding-left: 220px;
}
/* flexModal */
section.flexModal{
  display: flex;
}
section.flexModal nav{
  width: 200px;
}
section.flexModal article{
  flex: 1;
}

/* fixedLeft */
section.fixedLeft nav{
  position: fixed;
  top: 60px;
  bottom: 60px;
}
section.fixedLeft article{
  margin-left: 200px;  
}

關鍵點：

上下部分就是普通處理，fixed固定布局

position: fixed;

 

中間利用上下padding，留出上下部分的位置。

左側nav欄目，要固定也要用fixed。不過固定定位的元素要想高度百分百，可以使用top+bottom對應方位值的拉伸效果：

section.fixedLeft nav {
    position: fixed;
    top: 60px;
    bottom: 60px;
}

之所以top:60;bottom:60;是因為header和footer的高度均為60px；

 

這里，section的flex布局可以不存在，因為右邊內容區域使用margin-left邊距值留出了左側nav的位置，作為block布局流體自適應占滿右側剩余空間：

section.fixedLeft article {
    margin-left: 200px;
}

 

總結：

1. fixed固定定位
2. top+bottom方位值拉伸
3. margin邊距

　　

二、上中下 左不固定 - flex

概括：如圖，此種布局大致同第一幅，頂部、底部固定不動，只有整個中間區域可滾動，包括左側菜單欄。

html :

<header>我是頭部position: fixed;z-index: 9;</header>
    <section class="flexModal">
      <nav>
        <ul>
          <li>section.flexModal nav ul>li*5</li>
          <li>欄目一</li>
          <li>欄目二</li>
          <li class="active">欄目三</li>
          <li>欄目四</li>
          <li>欄目五</li>
        </ul>
      </nav>
      <article>
        <h3>
          內容區域 section.flexModal articel
        </h3>
        <p>
          section{
            padding: 60px 0;
          }
        </p>
        <p> 
          section.flexModal{
            display: flex;
          }
        </p>
        <p> 
          section.flexModal nav{
            width: 200px;
          }
        </p>
        <p> 
          section.flexModal article{
            flex: 1;
          }
        </p>
      </article>
    </section>
    <footer>底部版權同頭部 position: fixed;z-index: 9;</footer>

css：

body,ul,li{
  /* position: relative; */
  margin: 0;
  padding: 0;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  list-style: none;
}
header,footer{
  position: fixed;
  z-index: 9;
  width: 100%;
  height: 60px;
  font-size: 24px;
  color: #333;
  font-weight: bold;
  text-align: center;
  line-height: 60px;
  background: #77d677;
}
footer{
  bottom: 0;
}
section{
  padding: 60px 0;
}
nav{
  background: #93f393;
  color: #333;
}
nav li{
  padding: 10px 20px;
}
nav li.active{
  background: #77d677;
}
article{
  padding: 20px;
  font-size: 24px;
  text-align: center;
  background: #d9ffd9;
  height: 2500px;
}
/* default */
section.default nav{
  position: absolute;
  top: 60px;
  bottom: 60px;
  /* float: left;
  height: 100%; */
  width: 200px;
}
section.default nav li{
  padding: 10px 20px;
}
section.default nav li.active{
  background: #77d677;
}
section.default article{
  padding-left: 220px;
}
/* flexModal */
section.flexModal{
  display: flex;
}
section.flexModal nav{
  width: 200px;
}
section.flexModal article{
  flex: 1;
}

關鍵點：

上中下同第一個，不再贅述。

這里唯一不同的是左側菜單欄要同內容區域一同滾動：

去掉fixed固定定位即可。

同時，要想右側全部展開，即占滿出nav部分的右側全部空間，可以使用flex布局：

父元素section:

section.flexModal {
    display: flex;
}

 

右側內容：

section.flexModal article {
    flex: 1;
}

或者其他兩列布局的方式，比如浮動、margin負邊距實現。

具體實現方法同三列布局的各種方法原理一致。鏈接：CSS-三欄響應式布局（左右固寬，中間自適應）的五種方法

總結：

fixed固定定位

flex布局

 

三、上下固定的上中下單頁布局 - flex實現

概括：常見的三欄單頁布局。

html:

<body  class="container">
    <header>我是頭部</header>
    <article>我是中間文章主體部位</article>
    <footer>我是尾部</footer>
</body>

css:

    body{
      color: #333;
      font-weight: 600;
      font-size: 16px;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      text-align: center;
    }
    header,footer{
      line-height: 66px;
      background: lightgreen;
    }
    article{
      padding: 20px;
    }
    /* 父元素設置flex，然后布局方向為主軸從上到下，那么header和footer就會在最上邊和最下邊 */
    html,body{
      height: 100%;
      margin: 0;
      /* 不設置100%，高度撐不開 */
    }
    .container{
      display: flex;
      display: -webkit-box;
      display: -webkit-flex;
      flex-direction: column;
      -ms-flex-direction: column;
    }
    article{
      flex: 1;
    }

關鍵點：

上中下要有一個外部盒子包裹。這里偷懶使用了body：

body{
     display: flex;
      display: -webkit-box;
      display: -webkit-flex;
      flex-direction: column;
      -ms-flex-direction: column;
}

 上下設置自己的具體高度即可：

因為是單行，所以偷懶只用了line-height。

header,footer{
      line-height: 66px;
}

 中間內容區域瓜分剩余空間：

article {
    flex: 1;
}

 總結：

　　flex布局

　　垂直方向

 

 

四、上下固定中間分左右的單頁布局 - flex實現，嵌套使用

在第三的基礎上，中間還想分成左右兩份，結合第二中section也flex的實現，就有了四。

hah

很明顯，露怯了。。。

當我給artical賦了1000px的高度時，出現了bug就是上翻會露怯，底部跟隨而上。

所以，這種只適合不超出一屏的情況。

html:

    <header>我是頭部</header>
    <section>
      <nav>
        <ul>
          <li>導航一</li>
          <li>導航二</li>
          <li>導航三</li>
          <li>導航四</li>
        </ul>
      </nav>
      <article>我是中間文章主體部位</article>
    </section>
    <footer>我是尾部</footer>

css:

body{
      color: #333;
      font-weight: 600;
      font-size: 16px;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      text-align: center;
    }
    header,footer{
      line-height: 66px;
      background: lightgreen;
    }
    article{
      padding: 20px;
    }
    nav{
      background: green;
      color: #fff;
      padding: 20px;
    }
    ul,li{
      list-style: none;
      margin: 0;
      padding: 0;
      margin-bottom: 20px;
    }
    /* 父元素設置flex，然后布局方向為主軸從上到下，那么header和footer就會在最上邊和最下邊 */
    html,body{
      height: 100%;
      margin: 0;
      /* 不設置100%，高度撐不開 */
    }
    .container{
      display: flex;
      display: -webkit-box;
      display: -webkit-flex;
      flex-direction: column;
      -ms-flex-direction: column;
    }
    section{
      
      flex: 1;
      display: flex;
    }
    nav{
      width: 200px;
    }
    article{
      flex: 1;
      height: 3000px;//bug就是上翻會露怯，這種只適合不超出一屏的情況
    }

關鍵點：

上中下要有一個外部盒子包裹。這里偷懶使用了body：

    .container{
      display: flex;
      display: -webkit-box;
      display: -webkit-flex;
      flex-direction: column;
      -ms-flex-direction: column;
    }

 

父元素設置flex，然后布局方向為主軸從上到下，那么header和footer就會在最上邊和最下邊。

他們只需要設置自己的具體高度即可：

因為是單行，所以偷懶只用了line-height。

header, footer {
    line-height: 66px;
    background: lightgreen;
}

 

中間內容區域瓜分剩余空間：

section {
    flex: 1;
}

 

但是，中間現在又分了nav和article兩部分，需要兩列布局，我還是使用flex實現：

先在section加一句display

section {
    flex: 1;
    display: flex;
}

 

nav因為只需要固定的寬度：

nav {
    width: 200px;
}

 

右側內容占據nav以外的剩余區域即可：

article{
      flex: 1;
}

 

總結：

　　flex 套 flex

 

五、上下固定中間分左右的單頁布局 - absolute實現

跟第四的效果一樣，只是換魔鬼的兒子absolute來實現：

html :

  <header>頭部</header>
  <section>
    <aside>側邊欄</aside>
    <article>
      內容區域
    </article>
  </section>
  <footer>尾部</footer>

css :

    html,
    body {
      height: 100%;
    }
    body {
      margin: 0;
    }
    header,
    footer {
      position: absolute;
      line-height: 48px;
      left: 0;
      right: 0;
      z-index: 1;
      color: aquamarine;
      text-align: center;
      background: #333;
    }

    footer {
      bottom: 0;
    }

    aside {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      padding: 68px 0;
      width: 280px;
      text-align: center;
      background: #eee;
    }

    article {
      position: absolute;
      left: 280px;/*如果側邊欄有寬度*/
      right: 0;
      top: 0;
      bottom: 0;
      padding: 68px 20px;
      overflow: auto;/*超出滾動顯示*/
      background: #f5f5f5;
    }

　　

關鍵點：

把整個body當作relative父元素外框

上下結構是上下絕對定位：

header, footer {
    position: absolute;
    line-height: 48px;
    left: 0;
    right: 0;
    z-index: 1;
    color: aquamarine;
    text-align: center;
    background: #333;
}

 

footer {
    bottom: 0;
}

 

中間的左、右結構同時使用absolute定位，並用top、bottom拉伸加持。這樣可以使他們的高度100%絕對占據元素的高度。

    position: absolute;
    top: 0;
    bottom: 0;

 

然后左右的結構布局使用left和寬度配合

比如左邊aside直接

    left: 0;
    width: 280px;

右邊article用left躲過左邊的寬度：

    left: 280px;

最后，左右再分別使用padding空出header和footer的位置

padding: 68px 20px;

（用top+bottom對應數值也可以）

 position: absolute;
 top:60px;
 bottom: 60px;

 

總結：

　　absolute + 方位值

　　適合單頁布局

 

六、上下固定中間滾動的移動單頁結構- fixed定位實現

html：

<header>頭部</header>
  <section>
    <ul>
      <li>遇到這種布局，通常想到用fixed固定頂部和尾部，然后中間的有個和頂部尾部同值的上下padding，好讓內容撐開與上下的距離。但是這種布局會有bug。</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項我是列表項我是列表項我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
    </ul>
  </section>
  <footer>底部</footer>

css：

html,
    body {
      height: 100%;
    }
    body,ul {
      margin: 0;
    }
    header,
    footer {
      position: fixed;
      line-height: 48px;
      left: 0;
      right: 0;
      z-index: 1;
      color: aquamarine;
      text-align: center;
      background: #333;
    }
    header{
      top: 0;
    }
    footer {
      bottom: 0;
    }
    section{
      padding: 68px 0;
      /* position: absolute;
      top: 48px;
      right: 0;
      bottom: 48px;
      left: 0; 
      width: 100%;*/
      overflow: auto;
      background: #eee;
    }
    li{
      padding: 10px;
    }

關鍵點：

header上固定定位

position: fixed;
top： 0；

footer下固定定位

position:fixed;
bottom: 0;

上下均通過line-height實現固定高度，使用left+right橫向拉伸實現寬度100%效果：

    line-height: 48px;
    left: 0;
    right: 0;

中間不定位。只是padding上下留出header和footer的高度占位，且overflow：hidden

    padding: 68px 0;
    overflow: auto;

總結：

　　上下 fixed

　　中間 padding+overflow

 

七、上下固定中間滾動的移動單頁結構- absolute定位實現

html：

<header>頭部</header>
  <section>
    <ul>
      <li>遇到這種布局，通常想到用fixed固定頂部和尾部，然后中間的有個和頂部尾部同值的上下padding，好讓內容撐開與上下的距離。但是這種布局會有bug。</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項我是列表項我是列表項我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
      <li>我是列表項</li>
    </ul>
  </section>
  <footer>底部</footer>

css：

html,
    body {
      height: 100%;
    }
    body,ul {
      margin: 0;
    }
    header,
    footer {
      position: absolute;
      line-height: 48px;
      left: 0;
      right: 0;
      z-index: 1;
      color: aquamarine;
      text-align: center;
      background: #333;
    }
    header{
      top: 0;
    }
    footer {
      bottom: 0;
    }
    section{
      padding: 20px;
      position: absolute;
      top: 48px;
      right: 0;
      bottom: 48px;
      left: 0;
      overflow: auto;
    }
    li{
      padding: 10px 0;
    }

關鍵點：

header上絕對定位

position: absolute;
top： 0；

footer下絕對定位

position:absolute;
bottom: 0;

上下均通過line-height實現固定高度，使用left+right橫向拉伸實現寬度100%效果：

    line-height: 48px;
    left: 0;
    right: 0;

中間絕對定位。

position: absolute;

左右方位值水平放向拉伸實現寬度100%效果：

    right: 0;
    left: 0;

中間的上、下方位值留出header、footer的高度占位值：

    top: 48px;
    bottom: 48px;

超出會出現滾動條，不超出就沒有滾動條：

overflow：auto

總結：

　　全屏三大塊元素均使用absolute布局。

 

平時遇到這種布局，通常想到用fixed固定頂部和尾部，然后中間的有個和頂部尾部同值的上下padding，好讓內容撐開與上下的距離。但是這種布局會有bug。

 如果中間內容不小心設置了過高的高度超出視圖，會讓底部跟隨中間向上滑動。

全屏使用absolute布局是個很好的方法。

 

八、上下固定分左右自適應布局 - Grid網格布局實現

html：

<div class="wrapper">
    <div class="header">header</div>
    <div class="container">
      <div class="nav">nav</div>
      <div class="cont">cont</div>
    </div>
    <div class="footer">footer</div>
  </div>

 

css：

.wrapper{
    display: grid;
    grid-template-columns: 30% 70%;
    grid-template-rows: 100px 600px 50px;
  }
  .container{
    display: grid;
    grid-template-columns: 30% 70%;
    grid-template-rows: 100%;
  }
  .footer,.header,.container{
    grid-column: 1 / 4;
    background: lightgreen;
    text-align: center;
    line-height: 50px;
  }
  .nav{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    background: sandybrown;
  }
  .cont{
    grid-column: 2 / 4;
    grid-row: 1 / 2;
    background: salmon;
  }

 

注：案例代碼只為了簡單的實現效果，沒有兼容處理和代碼優化。

具體用法和原理講解見grid知識點講解篇。Grid

 

 

 

另一篇：CSS-三欄響應式布局（左右固寬，中間自適應）的五種方法

2018-09-10 13:11:39