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

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

 如果中间内容不小心设置了过高的高度超出视图,会让底部跟随中间向上滑动。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏coding for love

CSS入门3-认识html之元素

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

823
来自专栏前端布道

CSS选择器详解

最近在做一些面试的工作,我经常会问的一个问题就是:CSS中有哪些选择器。我往往得到的答案就是id选择器啊、class选择器啊,再追问下去就没了,这让我很是意外!...

3484
来自专栏前端知识分享

第92天:CSS3中颜色和文本属性

rgba是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha透明度。虽然它有的时候被描述为一个颜色空间

1922
来自专栏吾爱乐享

php学习之css常用的属性(三)

1803
来自专栏cnblogs

CSS3新特性应用之结构与布局

一、自适应内部元素 利用width的新特性min-content实现 width新特性值介绍: fill-available,自动填充盒子模型中剩余的宽度,...

2139
来自专栏知道一点点

bootstrap快速入门笔记(五)-文本元素类,各种标签,排版

2,全局元素被直接赋予font-size 设置为 14px,line-height 设置为 1.428,<p> (段落)元素还被设置了等于 1/2 行高(即 1...

1053
来自专栏菜鸟计划

css渲染(二) 文本

一、文本样式 首行缩进  text-indent   首行缩进是将段落的第一行缩进,这是常用的文本格式化效果。一般地,中文写作时开头空两格。[注意]该属性可以...

3557
来自专栏柠檬先生

css3 3d变换和动画——回顾

1.transform-style 属性指定嵌套原始是怎样在三维空间中呈现。   语法:transform-style: flat | preserve-3d ...

2037
来自专栏Create Sun

没人看系列----css 随笔

1533
来自专栏Windows Community

Windows 8.1 应用再出发 - 几种布局控件

本篇为大家介绍Windows 商店应用中几种布局控件的用法。分别是Canvas、Grid、StackPanel 和 VariableSizedWrapGrid。...

3287

扫码关注云+社区

领取腾讯云代金券