css布局 - 常规上中下分左右布局的一百种实现方法（更新中...）

时间：2024-01-21 14:54:19

一、 上中下左固定 - 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：

1 <div class="wrapper">
2     <div class="header">header</div>
3     <div class="container">
4       <div class="nav">nav</div>
5       <div class="cont">cont</div>
6     </div>
7     <div class="footer">footer</div>
8   </div>

 

css：

 1 .wrapper{
 2     display: grid;
 3     grid-template-columns: 30% 70%;
 4     grid-template-rows: 100px 600px 50px;
 5   }
 6   .container{
 7     display: grid;
 8     grid-template-columns: 30% 70%;
 9     grid-template-rows: 100%;
10   }
11   .footer,.header,.container{
12     grid-column: 1 / 4;
13     background: lightgreen;
14     text-align: center;
15     line-height: 50px;
16   }
17   .nav{
18     grid-column: 1 / 2;
19     grid-row: 1 / 2;
20     background: sandybrown;
21   }
22   .cont{
23     grid-column: 2 / 4;
24     grid-row: 1 / 2;
25     background: salmon;
26   }

 

注：案例代码只为了简单的实现效果，没有兼容处理和代码优化。

具体用法和原理讲解见grid知识点讲解篇。Grid

 

 

 

另一篇：CSS-三栏响应式布局（左右固宽，中间自适应）的五种方法

2018-09-10 13:11:39

相关文章