一、 上中下左固定 - 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{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;}section.default nav{position: absolute;top: 60px;bottom: 60px;width: 200px;}section.default nav li{padding: 10px 20px;}section.default nav li.active{background: #77d677;}section.default article{padding-left: 220px;}section.flexModal{display: flex;}section.flexModal nav{width: 200px;}section.flexModal article{flex: 1;}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{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;}section.default nav{position: absolute;top: 60px;bottom: 60px;width: 200px;}section.default nav li{padding: 10px 20px;}section.default nav li.active{background: #77d677;}section.default article{padding-left: 220px;}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 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;}html,body{height: 100%;margin: 0;}.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;}html,body{height: 100%;margin: 0;}.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;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布局是个很好的方法。
ps:明明传的都是动图,但是发现都不动。要看动图效果请转移到原文阵地吧:https://www.cnblogs.com/padding1015/p/9577961.html
共同学习,写下你的评论
评论加载中...
作者其他优质文章