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),它可以 ...
随机推荐
- (转)libhybris及EGL Platform-在Glibc生态中重用Android的驱动
原文地址:http://blog.csdn.net/jinzhuojun/article/details/41412587 libhybris主要作用是为了解决libc库的兼容问题,目的是为了在基于G ...
- Python——signal
该模块为在Python中使用信号处理句柄提供支持.下面是一些使用信号和他们的句柄时需要注意的事项: 除了信号 SIGCHLD 的句柄遵从底层的实现外,专门针对一个信号的句柄一旦设置,除非被明确地重置, ...
- WEB网页监控系统的设计框架思路具体解释
提示:也能够直接在LCD上显示摄像头数据.这个參考luvcview源代码.设计思路思将YUV或者MJPEG格式的数据转换成RGB格式的数据,然后实现图片的缩放,图像缩放算法:点击这里!,然后写到fra ...
- 让小区运营再智能一点，EasyRadius正式向WayOs用户提供到期弹出式提示充值页面
其实一直没向用户提供到期弹出式页面,主要是给VIP群的用户一点优越感,随着这次EasyRadius的更新,海哥就免费向普通easyRadius用户提供这两个模板下载. 有些人会问,什么样的模板.有什么 ...
- 软渲染 SoftRender
弄了这几年OpenGL对管线还是算比较熟悉,写起来也比较顺,不过每个顶点都要经过一堆变换,着实感到效率的重要.(矩阵乘顶点没有SSE加速啊)装个B,半天的成果..(主要很多东西都写好了直接拿来) // ...
- springboot+shiro+redis(集群redis版)整合教程
相关教程: 1. springboot+shiro整合教程 2. springboot+shiro+redis(单机redis版)整合教程 3.springboot+shiro+redis(单机red ...
- 《C程序猿从校园到职场》带领大家从校园走向职场
七夕节刚过.就有好消息传来:本人新书<C程序猿从校园到职场>正式出版并在各大电商平台上发售了! 以下.让我们一起来赞赏一下纸质书的"风採"吧. 本书文件夹 第1章 概述 ...
- PCL(Point Cloud Library)的第三方库简单介绍（boost，eigen，flann，vtk，qhull）
PCL由于融合了大量的第三方开源库,导致学习成本升高~在学习之前我们最好还是了解一下这些库都是干嘛的,以便有的放矢.在之后更好的使用 boost: C++的标准库的备用版,擅长从数学库到智能指针,从模 ...
- GBT算法在拖动滑块辨别人还是机器中的应用
1.数据源格式:(x,y,t),第一个值x是x坐标范围是1-250的整数,y是1-10的整数,t是滑块从上一个坐标到下一个坐标的时间差,ok是判断是人操作的,Fail是判断是机器操作的,数据看的出,同 ...
- Android图片编码机制深度解析（Bitmap，Skia，libJpeg）
问题 工作中遇到了Android中有关图片压缩保存的问题,发现这个问题还挺深,而且网上资料比较有限,因此自己深入研究了一下,算是把这个问题自顶至下全部搞懂了,在此记录. 相关的几个问题如下: 1.An ...