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

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

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

html：

css：

关键点：

上下部分就是普通处理，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 :

css：

关键点：

上中下同第一个，不再赘述。

这里唯一不同的是左侧菜单栏要同内容区域一同滚动：

去掉fixed固定定位即可。

同时，要想右侧全部展开，即占满出nav部分的右侧全部空间，可以使用flex布局：

父元素section:

section.flexModal {
    display: flex;
}

 

右侧内容：

section.flexModal article {
    flex: 1;
}

或者其他两列布局的方式，比如浮动、margin负边距实现。

具体实现方法同三列布局的各种方法原理一致。链接：CSS-三栏响应式布局（左右固宽，中间自适应）的五种方法

总结：

fixed固定定位

flex布局

 

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

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

html:

css:

关键点：

上中下要有一个外部盒子包裹。这里偷懒使用了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：

    .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 :

　　

关键点：

把整个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：

css：

关键点：

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：

css：

关键点：

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

posted @   xing.org1^  阅读(19139)  评论(2)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
点击右上角即可分享
微信分享提示