【CSS】CSS经典布局之绝对底部布局

2018-01-11 12:51:00来源:网络收集作者:管理员人点击

分享

阿里云爆款

转载自:CSS经典布局之Sticky footer布局


何为Sticky footer布局?

  我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分。当页头区和内容区的内容较少时,页脚区不是随着内容区排布而是始终显示在屏幕的最下方。当内容区的内容较多时,页脚能随着文档流撑开始终显示在页面的最下方。这就是传说中的Sticky footer布局。


Sticky footer布局实现
一、负 margin 布局方式

这里是头部


这里是main content区域...


这里是main content区域...


这里是main content区域...


这里是main content区域...


© 2017 No rights reserved.


Made with ♥ by an anonymous pastafarian.

!!!特别说明!!!:使用这个布局的前提,就是footer要在总的div容器之外,footer使用一个层,其它所有内容使用一个总的层。如果确实需要到添加其它同级层,那这个同级层就必须使用position:absolute进行绝对定位。


* {margin: 0; padding: 0; text-align: center;}
html,body,.detail {height: 100%;}
body>.detail {height: 100%; min-height: 100%;}
.main {padding-bottom: 64px;}
.footer {position: relative; margin-top: -64px; height: 64px; clear: both; background-color: red;}
.clearfix::after {/* 测试于两栏悬浮布局 */
display: block;
content: ".";
height: 0;
clear: both;
visibility: hidden;
}

PC端效果图:


【CSS】CSS经典布局之绝对底部布局
移动端效果图:
【CSS】CSS经典布局之绝对底部布局


二、flex 布局方式

Site name


Bacon Ipsum dolor sit amet...


Bacon Ipsum dolor sit amet...


Bacon Ipsum dolor sit amet...


Bacon Ipsum dolor sit amet...




© 2017 No rights reserved.


Made with ♥ by an anonymous pastafarian.



* {margin: 0; padding: 0;}
body{display: flex; flex-flow: column; min-height: 100vh; overflow:auto;}
h1{font-size: 60px; text-align: center;}
p{font-size: 24px; text-align: center;}
.main{flex:1;} /* 若不懂请看本文末尾的链接 */
footer{background-color: red;}

PC端效果图:
【CSS】CSS经典布局之绝对底部布局
移动端效果图:
【CSS】CSS经典布局之绝对底部布局
flex布局结构简单,代码精简。因为flex存在着兼容性,所以在使用这种方式布局时需要注意。


若不懂flex: 1;请跳转【CSS】由 flex: 1; 引发的思考


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台