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),它可以 ...
随机推荐
- CI框架 -- 在视图文件中使用 PHP 替代语法
如果你不使用 CodeIgniter 的 模板引擎, 那么你就只能在视图文件中使用纯 PHP 语法了.为了精简视图文件, 使其更可读,建议你在写控制结构或 echo 语句时使用 PHP 的替代语法. ...
- ubuntu -- 系统目录结构
1./:目录属于根目录,是所有目录的绝对路径的起始点,Ubuntu 中的所有文件和目录都在跟目录下. 2./etc:此目录非常重要,绝大多数系统和相关服务的配置文件都保存在这里,这个目录的内容一般只能 ...
- ORA-00918: column ambiguously defined
今天遇到了一个Oracle的SQL问题:ORA-00918: column ambiguously defined 大致的意思就是字段名称不明确,可能存在同名的字段 SELECT * FROM (SE ...
- Drools 语法
Drools 语法 规则语法 package: package 的名字是随意的,不必必须对应物理路径 import: 导入外部变量 规则的编译与运行要通过Drools 提供的各种API 来实现.API ...
- 【转】Spring Boot干货系列：（二）配置文件解析
转自:Spring Boot干货系列:(二)配置文件解析 前言 上一篇介绍了Spring Boot的入门,知道了Spring Boot使用"习惯优于配置"(项目中存在大量的配置,此 ...
- Springboot学习笔记（七）-集成Redis
redis下载地址 添加依赖 <dependencies> <dependency> <groupId>org.springframework.boot</g ...
- 同一个Tomcat部署两个project之间的通信问题
同一个tomcat下的两个project是无法通信的. 同一个tomcat中的project能互相调用吗 启动一个tomcat部署多个项目,那么每个项目算是一个线程还是进程呢? Tomcat中的pro ...
- Spring定时器的两种实现方式
有两种流行Spring定时器配置:Java的Timer类和OpenSymphony的Quartz. 1.Java Timer定时 首先继承java.util.TimerTask类实现run方法 imp ...
- ubuntu 12.04和Windows 7双系统的安装方法
ubuntu是一个操作系统,和安卓一样同是linux内核下的子民,所以来这贡献一下,也求JW放出安卓4.0原生正式版,我只想要这个. 前几天发布了ubuntu12.04LTS 版本,兴奋ing. 看到 ...
- 获取真实ip
public function ip() { if (getenv('HTTP_CLIENT_IP')) { $ip = getenv('HTTP_CLIENT_IP'); } elseif (get ...