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

Eddie_yang 发布于 2018/11/15 14:25
阅读 147
收藏 0

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

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

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

html:

1

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

1

2

css:

body,ul,li{margin0;padding0;font-family'Gill Sans''Gill Sans MT', Calibri, 'Trebuchet MS'sans-serif;list-stylenone;}header,footer{positionfixed;z-index9;width100%;height60px;font-size24px;color#333;font-weightbold;text-aligncenter;line-height60px;background#77d677;}footer{bottom0;}section{padding60px 0;}nav{background#93f393;color#333;}nav li{padding10px 20px;}nav li.active{background#77d677;}article{padding20px;font-size24px;text-aligncenter;background#d9ffd9;height2500px;}section.default nav{positionabsolute;top60px;bottom60px;width200px;}section.default nav li{padding10px 20px;}section.default nav li.active{background#77d677;}section.default article{padding-left220px;}section.flexModal{display: flex;}section.flexModal nav{width200px;}section.flexModal article{flex: 1;}section.fixedLeft nav{positionfixed;top60px;bottom60px;}section.fixedLeft article{margin-left200px;}

 

关键点:

上下部分就是普通处理,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边距

     

  4.  

     

 

 

二、上中下 左不固定 - flex

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

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

html :

1

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

1

body,ul,li{margin0;padding0;font-family'Gill Sans''Gill Sans MT', Calibri, 'Trebuchet MS'sans-serif;list-stylenone;}header,footer{positionfixed;z-index9;width100%;height60px;font-size24px;color#333;font-weightbold;text-aligncenter;line-height60px;background#77d677;}footer{bottom0;}section{padding60px 0;}nav{background#93f393;color#333;}nav li{padding10px 20px;}nav li.active{background#77d677;}article{padding20px;font-size24px;text-aligncenter;background#d9ffd9;height2500px;}section.default nav{positionabsolute;top60px;bottom60px;width200px;}section.default nav li{padding10px 20px;}section.default nav li.active{background#77d677;}section.default article{padding-left220px;}section.flexModal{display: flex;}section.flexModal nav{width200px;}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:

1

<body class="container"><header>我是头部</header><article>我是中间文章主体部位</article><footer>我是尾部</footer></body>

css:

1

body{color#333;font-weight600;font-size16px;font-familyVerdana, Geneva, Tahomasans-serif;text-aligncenter;}header,footer{line-height66px;background: lightgreen;}article{padding20px;}html,body{height100%;margin0;}.container{display: flex;display: -webkit-box;display: -webkit-flex;flex-direction: column;-ms-flex-direction: column;}article{flex: 1;}

关键点:

上中下要有一个外部盒子包裹。这里偷懒使用了body:

1

2

3

4

5

6

7

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://img2.sycdn.imooc.com/5beb97a30001598c10590067.jpg

hah

很明显,露怯了。。。

当我给artical赋了1000px的高度时,出现了bug就是上翻会露怯,底部跟随而上。

所以,这种只适合不超出一屏的情况。

html:

1

<header>我是头部</header><section><nav><ul><li>导航一</li><li>导航二</li><li>导航三</li><li>导航四</li></ul></nav><article>我是中间文章主体部位</article></section><footer>我是尾部</footer>

css:

1

body{color#333;font-weight600;font-size16px;font-familyVerdana, Geneva, Tahomasans-serif;text-aligncenter;}header,footer{line-height66px;background: lightgreen;}article{padding20px;}nav{backgroundgreen;color#fff;padding20px;}ul,li{list-stylenone;margin0;padding0;margin-bottom20px;}html,body{height100%;margin0;}.container{display: flex;display: -webkit-box;display: -webkit-flex;flex-direction: column;-ms-flex-direction: column;}section{flex: 1;display: flex;}nav{width200px;}article{flex: 1;height3000px;//bug就是上翻会露怯,这种只适合不超出一屏的情况 }

关键点:

上中下要有一个外部盒子包裹。这里偷懒使用了body:

1

 .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://img2.sycdn.imooc.com/5beb9827000179e400260040.jpg

html :

1

<header>头部</header><section><aside>侧边栏</aside><article>内容区域</article></section><footer>尾部</footer>

css :

1

html, body {height100%;}body {margin0;}header, footer {positionabsolute;line-height48px;left0;right0;z-index1;color: aquamarine;text-aligncenter;background#333;}footer {bottom0;}aside {positionabsolute;top0;bottom0;left0;padding68px 0;width280px;text-aligncenter;background#eee;}article {positionabsolute;left280px;right0;top0;bottom0;padding68px 20px;overflowauto;background#f5f5f5;}

关键点:

把整个body当作relative父元素外框

上下结构是上下绝对定位:

1

header, footer {positionabsolute;line-height48px;left0;right0;z-index1;color: aquamarine;text-aligncenter;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

1

<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

1

html, body {height100%;}body,ul {margin0;}header, footer {positionfixed;line-height48px;left0;right0;z-index1;color: aquamarine;text-aligncenter;background#333;}header{top0;}footer {bottom0;}section{padding68px 0;overflowauto;background#eee;}li{padding10px;}

关键点:

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://img3.sycdn.imooc.com/5beb98f80001080003310559.jpg

html:

1

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

1

html, body {height100%;}body,ul {margin0;}header, footer {positionabsolute;line-height48px;left0;right0;z-index1;color: aquamarine;text-aligncenter;background#333;}header{top0;}footer {bottom0;}section{padding20px;positionabsolute;top48px;right0;bottom48px;left0;overflowauto;}li{padding10px 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


作者:xing_org1
链接:https://www.imooc.com/article/261817
来源:慕课网

加载中
返回顶部
顶部