为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 css布局 - 常规上中下分左右布局的一百种实现方法

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

标签：
Html5 CSS3

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

https://img1.sycdn.imooc.com//5beb946a00012be510640353.jpg

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

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{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;}section.default nav{position: absolute;top: 60px;bottom: 60px;width: 200px;}section.default nav li{padding: 10px 20px;}section.default nav li.active{background: #77d677;}section.default article{padding-left: 220px;}section.flexModal{display: flex;}section.flexModal nav{width: 200px;}section.flexModal article{flex: 1;}section.fixedLeft nav{position: fixed;top: 60px;bottom: 60px;}section.fixedLeft article{margin-left: 200px;}


关键点：

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

position: fixed;


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

https://img1.sycdn.imooc.com//5beb93d60001b31a06930223.jpg


左侧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

https://img1.sycdn.imooc.com//5beb957e0001136f19100366.jpg

概括：如图，此种布局大致同第一幅，顶部、底部固定不动，只有整个中间区域可滚动，包括左侧菜单栏。

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{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;}section.default nav{position: absolute;top: 60px;bottom: 60px;width: 200px;}section.default nav li{padding: 10px 20px;}section.default nav li.active{background: #77d677;}section.default article{padding-left: 220px;}section.flexModal{display: flex;}section.flexModal nav{width: 200px;}section.flexModal article{flex: 1;}

关键点：

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

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

去掉fixed固定定位即可。

https://img1.sycdn.imooc.com//5beb93e20001784219160936.jpg

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

父元素section:

section.flexModal {
    display: flex;
}

右侧内容：

section.flexModal article {
    flex: 1;
}

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

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

总结：

fixed固定定位

flex布局

 

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

https://img1.sycdn.imooc.com//5beb95e20001ea2000240020.jpg

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

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;}html,body{height: 100%;margin: 0;}.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的实现，就有了四。

https://img1.sycdn.imooc.com//5beb97a30001598c10590067.jpg

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;}html,body{height: 100%;margin: 0;}.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来实现：

https://img1.sycdn.imooc.com//5beb9827000179e400260040.jpg

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定位实现

https://img1.sycdn.imooc.com//5beb98ac0001080003310559.jpg

html：

+ View Code

<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：

+ View Code

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;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定位实现

https://img1.sycdn.imooc.com//5beb98f80001080003310559.jpg

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布局是个很好的方法。


ps：明明传的都是动图，但是发现都不动。要看动图效果请转移到原文阵地吧：https://www.cnblogs.com/padding1015/p/9577961.html

点击查看更多内容
发表于 2018.11.14 11:41， 共 7274 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
14人点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

xing_org1

Web前端工程师
手记
篇
粉丝
77
获赞与收藏
516

关注作者，订阅最新文章

阅读免费教程

感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消