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

发布日期:2019-05-28

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

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

html:

<header>我是头部position: fixed;z-index: 9;</header> <section > <nav> <ul> <li>section.flexModal nav ul>li*5</li> <li>栏目一</li> <li>栏目二</li> <li >栏目三</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;}

 

总结:

    fixed固定定位top+bottom方位值拉伸margin边距

  

二、上中下 左不固定 - flex

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

html :

<header>我是头部position: fixed;z-index: 9;</header> <section > <nav> <ul> <li>section.flexModal nav ul>li*5</li> <li>栏目一</li> <li>栏目二</li> <li >栏目三</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 > <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。

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

全屏使用absolute布局是个很好的方法。

 

另一篇:CSS-三栏响应式布局(左右固宽,中间自适应)的五种方法

2018-09-10 13:11:39