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),它可以 ...
随机推荐
- (转)OpenGL ES编程入门资源集合
出自:http://blog.csdn.net/u013467442/article/details/44498125 OpenGL ES 2.0中文手册:http://www.dreami ...
- JAVA的get post 区别
1. get 是从服务器上获取数据,post 是向服务器传送数据. get 请求返回 request - URI 所指出的任意信息.Post 请求用来发送电子邮件.新闻或发送能由交互用户填写的表格.这 ...
- RPM是RedHat Package Manager（RedHat软件包管理工具）类似Windows里面的“添加/删除程序”
转自http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/10/08/2203153.html 备忘 rpm 执行安装包 二进制包(Binary ...
- 原来找字也可以这样用ElseIf FindStr 手机按键精灵 跟大漠的区别
原来找字也可以这样用ElseIf FindStr(646, 1109, 776, 1261, "公告小叉", "FFFFFF-333333", 0.9, in ...
- 【WP8】富文本功能实现
2014年8月1日更新:修复如果有多个相同链接解析失败的Bug,谢谢 @Walsh 提供的问题 富文本在移动APP上应用的最多的就是表情了,类似微博,QQ,微信都有对提供对表情和链接的支持,富文本一般 ...
- 【WP8】图片压缩处理
最近在做图片上传功能,类似于微信朋友圈的功能,现在的手机像素都比较高,手机上的图片一般都比较大(几M),对于大图,在上传之前,我们需要对图片进行压缩(分辨率和质量),再上传到服务器,以减少网路流量传输 ...
- 无需Java代码通过JHipster生成有安全验证的微服务应用
让我们继续登录到我们的应用程序,并导航到Account>Login菜单项.我们将使用admin/admin作为凭据,缺省情况下,JHipster将自动创建.一切进展顺利.欢迎页面将显示确认登录成 ...
- 妙味远程课堂-JS热身运动-上
希望某个元素移除视线 display:none//显示无 visibility:hidden//可见性 隐藏 width/height 改为0 透明度 定位,left/top值为负值 用与背景颜色一样 ...
- 常见bootloader介绍
https://blog.csdn.net/weibo1230123/article/details/82716818 http://fasight001.spaces.eepw.com.cn/art ...
- free命令的具体含义
https://www.cnblogs.com/thinkam/p/8407043.html https://blog.csdn.net/andy205214/article/details/7709 ...