博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
css布局 - 常规上中下分左右布局的一百种实现方法（更新中...）
阅读量：7077 次
发布时间：2019-06-28

本文共 12903 字，大约阅读时间需要 43 分钟。

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

概括：如图，此种布局就是顶部、底部和左侧固定不动，只有中间右侧超出可滚动。

html：

     
      我是头部position: fixed;z-index: 9;
     
    
     
      
            
      
        
       
          内容区域 section.flexModal articel        
        
       
          section{            padding: 60px 0;          }        
        
       
           section.flexModal{            display: flex;          }        
        
       
           section.flexModal nav{            width: 200px;          }        
        
       
           section.flexModal article{            flex: 1;          }        
      
      
    
     
    
     
      底部版权同头部 position: fixed;z-index: 9;

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 :

     
      我是头部position: fixed;z-index: 9;
     
    
     
      
            
      
        
       
          内容区域 section.flexModal articel        
        
       
          section{            padding: 60px 0;          }        
        
       
           section.flexModal{            display: flex;          }        
        
       
           section.flexModal nav{            width: 200px;          }        
        
       
           section.flexModal article{            flex: 1;          }        
      
      
    
     
    
     
      底部版权同头部 position: fixed;z-index: 9;

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负边距实现。

具体实现方法同三列布局的各种方法原理一致。链接：

总结：

fixed固定定位

flex布局

 

三、上下固定的上中下单页布局 - flex实现

概括：常见的三栏单页布局。

html:

    
     
      我是头部
     
    
     
      我是中间文章主体部位
     
    
     
      我是尾部

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:

     
      我是头部
     
    
     
      
            
      
       我是中间文章主体部位
      
    
     
    
     
      我是尾部

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 :

     
      头部
     
  
     
    
          
      
             内容区域    
      
  
     
  
     
      尾部

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：

     
      头部
     
  
     
    
      
          
           
  • 遇到这种布局，通常想到用fixed固定顶部和尾部，然后中间的有个和顶部尾部同值的上下padding，好让内容撑开与上下的距离。但是这种布局会有bug。
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项我是列表项我是列表项我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •     
          
  
     
  
     
      底部

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：

     
      头部
     
  
     
    
      
          
           
  • 遇到这种布局，通常想到用fixed固定顶部和尾部，然后中间的有个和顶部尾部同值的上下padding，好让内容撑开与上下的距离。但是这种布局会有bug。
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项我是列表项我是列表项我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •       
           
  • 我是列表项
    •     
          
  
     
  
     
      底部

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 
     
      2     
      
       header
      
3     
      
       4       
       
        nav
       
5       
       
        cont
       
6     
      
7     
      
       footer
      
8

 

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知识点讲解篇。

 

 

 

另一篇：

2018-09-10 13:11:39

转载于:https://www.cnblogs.com/padding1015/p/9577961.html

你可能感兴趣的文章
CCNA 学习笔记(三)--路由选择协议（静态路由协议）
查看>>
python 学习笔记（4）-转载
查看>>
python实例pyspark以及python中文显示
查看>>
一个典型核心网络故障分析
查看>>
获取lamp编译参数
查看>>
Shell理论学习(一)
查看>>
phpcms开发之模板语法规则
查看>>
CST UTC
查看>>
因为看见，所以发现：QBotVariant谢绝落幕
查看>>
我的友情链接
查看>>
让Apache支持shtml实现include文件解析的配置方法
查看>>
软件测试学习：检查产品说明书
查看>>
linux 防火墙
查看>>
mysql事务提交模式
查看>>
word search 此题若会，所有dfs矩阵全会
查看>>
ASP.NET Cache的一些总结2
查看>>
JAVA中易出错的小问题(二)
查看>>
asp.net 用正则表达式过滤内容中的电话，qq，email
查看>>
1109 Group Photo
查看>>
Flutter插件开发之APK自动安装
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2025-02-08 04:26:21   当前IP: 3.141.38.137   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我