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;
}
总结：
- fixed固定定位
- top+bottom方位值拉伸
- 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:;
}
或者其他两列布局的方式，比如浮动、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:;
}
总结：
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;
}
他们只需要设置自己的具体高度即可：
因为是单行，所以偷懒只用了line-height。
header, footer {
line-height: 66px;
background: lightgreen;
}
中间内容区域瓜分剩余空间：
section {
flex:;
}
但是，中间现在又分了nav和article两部分，需要两列布局，我还是使用flex实现：
先在section加一句display
section {
flex:;
display: flex;
}
nav因为只需要固定的宽度：
nav {
width: 200px;
}
右侧内容占据nav以外的剩余区域即可：
article{
flex:;
}
总结：
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:;
right:;
z-index:;
color: aquamarine;
text-align: center;
background: #333;
}
footer {
bottom:;
}
中间的左、右结构同时使用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布局是个很好的方法。
八、上下固定分左右自适应布局 - Grid网格布局实现
html：
<div class="wrapper">
<div class="header">header</div>
<div class="container">
<div class="nav">nav</div>
<div class="cont">cont</div>
</div>
<div class="footer">footer</div>
</div>
css：
.wrapper{
display: grid;
grid-template-columns: 30% 70%;
grid-template-rows: 100px 600px 50px;
}
.container{
display: grid;
grid-template-columns: 30% 70%;
grid-template-rows: 100%;
}
.footer,.header,.container{
grid-column: 1 / 4;
background: lightgreen;
text-align: center;
line-height: 50px;
}
.nav{
grid-column: 1 / 2;
grid-row: 1 / 2;
background: sandybrown;
}
.cont{
grid-column: 2 / 4;
grid-row: 1 / 2;
background: salmon;
}
注：案例代码只为了简单的实现效果，没有兼容处理和代码优化。
具体用法和原理讲解见grid知识点讲解篇。Grid
另一篇：CSS-三栏响应式布局（左右固宽，中间自适应）的五种方法
2018-09-10 13:11:39
css布局 - 常规上中下分左右布局的一百种实现方法（更新中...）的更多相关文章
- Jquery easy UI 上中下三栏布局 分类： ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏
效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- php实现返回上一页的功能的3种有效方法
php实现返回上一页的功能的3种有效方法 header(location:你的上一页的路径); // 注意这个函数前不能有输出 header(location:.getenv("HT ...
- CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法
目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...
- 痞子衡嵌入式：史上最强i.MX RT学习资源汇总(持续更新中...)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MX RT学习资源. 类别 资源 简介 官方汇总 i.MXRT产品主页 恩智浦官方i.MXRT产品主页,最权威的资料都在这里,参考手 ...
- css上下或者上中下 自适应布局
方法就是头部不变,中间和底部绝对定位 *{ margin: ; padding: ; } div{ text-align: center; font-size: 30px; } .header,.fo ...
- 常见UI布局之1-2-1单列变宽布局
扩展前一篇“上中下三栏布局”,中间栏划分成两列,一列宽度固定,一列宽度随浏览器窗口宽度的变化而变化.固定宽度列定义为#side,可分为左侧布局和右侧布局,分别实现如下: 1-2-1左侧固定宽度布局 & ...
- CSS当中color的四种表示方法
这是我的第一篇博客,所以写的东西会比较简单. css当中,好多地方都会用到color属性,用来使html内容丰富多彩,例如:background-color:border-color: 第一种表示法使 ...
- 用frame实现最基本的上中下三层布局,中间又分左右两部分.
用frame实现最基本的上中下三层布局,中间又分左右两部分. 用frame的好处在于不用象DIV一样要对浮动和大小进行精确控制,以及要考虑宽屏的时候怎么办.而且在导航的时候非常简单.比如说,左边是导航 ...
- CSS实现各类分栏布局
在CSS中,实现分栏布局有两种方法.第一种方法是使用四种CSS定位选项(absolute .static.relative和fixed)中的绝对定位(absolute positioning),它可以 ...
随机推荐
- AFNetWorking能做什么
AFNetwork是一个轻量级的网络请求api类库.是以NSURLConnection, NSOperation和其它方法为基础的. 以下这个样例是用来处理json请求的: NSURL *url = ...
- linux任务计划 chkconfig工具 systemd管理服务 unit介绍 target介绍
linux任务计划 任务计划:特定时间备份数据,重启服务,shell脚本,单独的命令等等. 任务计划配置文件:cat /etc/crontab [root@centos7 ~]# cat /etc/c ...
- CSS3与动画有关的属性transition、animation、transform对比
最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了. 索性在这里进行一个简单的对比,加深自己的记忆. 浏览器兼容性 CSS3 transform 属性 Internet ...
- 8. Django系列之上传文件与下载-djang为服务端,requests为客户端
preface 运维平台新上线一个探测功能,需要上传文件到服务器上和下载文件从服务器上,那么我们就看看requests作为客户端,django作为服务器端怎么去处理? 对于静态文件我们不建议通过dja ...
- 使用Eclipse构建Maven项目
http://blog.csdn.net/qjyong/article/details/9098213
- RSS 使用前详解
您应当具备的基础知识 在继续学习之前,您需要对下面的知识有基本的了解: HTML / XHTML XML / XML 命名空间 什么是 RSS? RSS 指 Really Simple Syndica ...
- js获取视频截图
参考:https://segmentfault.com/q/1010000006717959问题:a.获取的好像是第一帧的图?第一帧为透明图时,获取的个透明图片b.得先加载视频到video,做视频上传 ...
- html5页面平滑切换实现以及问题（20160120更新）
注:本文是基于手机端 Hybrid APP 讨论,而不是普通的PC端网页 >> 之前的页面跳转方式: 比如有这两个页面:A.html B.html, A B 是纯HTML实现,没有采用 ...
- [AX2012]在SSRS报表中获取从Menuitem传入的记录
在较早版本的AX中我们运行一个报表时会用到类RunBaseReport,从它扩展一个子类,再由它运行报表,一个典型的Axapta3中的例子: class ReportProdInfo extends ...
- flexbox父盒子justify-content属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...