sticky-footer解决方案

在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送，我们看到的效果就如下面两张图这样。这种效果基本是无处不在的，很受欢迎,下面我介绍一个好理解，兼容性不错的一种方式

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <title></title>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link href="style.css" rel="stylesheet">

 </head>

 <body>

     <div class="detail">

         <div class="detail-wrapper clearfix">

             <div class="detail-main">

                 <p>个区域是内容层</p>

                 <p>个区域是内容层</p>

                 <p>个区域是内容层</p>

                 <p>个区域是内容层</p>

                 <p>个区域是内容层</p>

                 <p>个区域是内容层</p>

                 <p>个区域是内容层</p>

             </div>

         </div>

         <div class="detail-close">x</div>

     </div>

 </body>

 </html>

下面是css代码

 .clearfix {

     display: inline-block;

 }

 .clearfix:after {

     content: ".";

     display: block;

     height:;

     line-height:;

     clear: both;

     visibility: hidden;

 }

 .detail {

     position: fixed;

     z-index:;

     top:;

     left:;

     width: 100%;

     height: 100%;

     overflow: auto;

     background: rgba(7, 17, 27, 0.8)

 }

 .detail-wrapper {

     min-height: 100%;

 }

 .detail-main {

     margin-top: 64px;

     padding-bottom: 64px;

     /*重要内容  在内容下面添加一个padding ，这个padding的作用是不让下面关闭按钮被遮挡住*/

     color: #8398ad;

 }

 .detail-close {

     position: relative;

     width: 32px;

     height: 32px;

     margin: -64px auto 0 auto;

     /*重要内容，在关闭按钮一定要有一个footer高度的负值*/

     clear: both;

     font-size: 32px;

     color: #8398ad;

 }

这个是内容不够长的样式

这个图是当内容过长的时候关闭按钮会被顶到下面去

为了保证兼容性，需要在

detail-wrapper

上添加clearfix类。

这是我最近做项目的一个小心得

stlcky footers布局小技巧的更多相关文章

  1. 第八十四节，css布局小技巧及font-awesome图标使用

    css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...

  2. 超 Nice 的表格响应式布局小技巧

    今天,遇到了一个很有意思的问题,一名群友问我,仅仅使用 CSS,能否实现这样一种响应式的布局效果: 简单解析一下效果: 在屏幕视口较为宽时,表现为一个整体 Table 的样式 而当屏幕视口宽度较小时, ...

  3. css浮动布局小技巧

    父元素如何围住浮动的子元素的三种办法: 一.为父元素应用overflow:hidden. overflow真正用途是防止包含元素被大的内容撑开,设定了宽度之后,包含元素将超过容器的内容减掉:而它还有另 ...

  4. css布局小技巧 2016.03.06

    偶遇一个可爱的css布局学习网站,立刻学起来哟- max-width: 当页面左右宽度缩小时,为了避免出现左右滚动条的糟糕体验,就可以用到max-width啦!页面比宽度小时,会自动缩小哦- max- ...

  5. div布局小技巧

    第一: 多个div整齐排列在外层div中,如图: 看到所有小的div的前后左右间隔都相等.假定已经制作好上述单元div控件.在外层大div中循环开始创建它们. for (var i=0; i < ...

  6. css和HTML布局小技巧

    一:水平居中 1. 如下所示,让child在parent中水平居中 <!DOCTYPE html> <html> <head lang="en"> ...

  7. cssfloat布局以及其他小技巧

    css float 布局以及其他小技巧总结 这篇博文 前面四个部分是关于css 经典布局 如果你已经知道了 可以直接跳过看第六部分 css 的其他小技巧 1.0 左右居中布局 <!DOCTYPE ...

  8. 关于css布局、居中的问题以及一些小技巧

    CSS的两种经典布局 左右布局 一栏定宽,一栏自适应 <!-- html --> <div class="left">定宽</div> < ...

  9. iOS：小技巧（不断更新）

    记录下一些不常用技巧,以防忘记,复制用. 1.获取当前的View在Window的frame: UIWindow * window=[[[UIApplication sharedApplication] ...

随机推荐

  1. js中级小知识5

    元素的属性 div.attributes是所有标签属性构成的数据集合 div.classList是所有class名构成的数组集合 在classList的原型链上可以看到add()和remove() 1 ...

  2. python全栈开发 * 22 面向对象 知识点汇总 * 180703

    22 面向对象 -----属性,类方法,静态方法,反射一.属性1.属性的定义:将方法伪装成属性,虽然在代码层面上没有任何高深之处,但让其看起来更合理. (类似于属性的方法)class Person: ...

  3. 中国标准时间转换成YYY-MM-DD

    export function changeDate(dateA) { let date; if (dateA) { if (dateA.toString().indexOf('GMT') > ...

  4. 项目实战02：LNMP的搭建、nginx的ssl加密、身份验证的实现

    目录 实战一:搭建lnmp及类小米等商业网站的实现 1.安装包,开启服务 2.修改nginx的配置文件 3.修改php-fpm的配置文件 4.运行mysql ,创建一会网页需要的库 5.把事先找好的小 ...

  5. TCP/IP的分层管理

    网络基础TCP/IP 我们通常所使用的网络(包括互联网)均是在TCP/IP协议族的基础上运作的.HTTP属于它内部的一个子集 TCP/IP协议族按层次分为:应用层,传输层,网络层和数据链路层(更好的划 ...

  6. java之项目构建工具Gradle

    介绍 Java 作为一门世界级主流编程语言,有一款高效易用的项目管理工具是 java 开发者共同追求的心愿和目标.显示 2000 年的 Ant,后有 2004 年的 Maven 两个工具的诞生,都在 ...

  7. Parallels Desktop 重装系统

    安装教程,大家可以在网上找找 现在我想重装系统,怎么弄呢? 1.~/Documents/Parallels 目录下那个PVM后缀的文件直接删除 2.重装找开虚拟机,会弹出一个框,说找不到系统,点击删除 ...

  8. centos----------centos下如何安装phpstorm

    1.首先打开centos下的谷歌浏览器,找到phpstorm官网下载linux版本.PhpStorm-2016.3.2.tar.gz 2.然后gunzip PhpStorm-2016.3.2.tar. ...

  9. .NET Core 全新认识(转载)

    .NET Core 全新认识   cnblogs.com/yubinfeng/p/6626694.html 一.概述      .NET 经历14年,在Windows平台上的表现已经相当优秀,但是“跨 ...

  10. JavaWeb-----实现第一个Servlet程序

    1.Servlet简介      Servlet是在服务器端运行的一个小程序,实际上一个Servlet就是一个Java类,并且可以通过“请求-响应”编程模型来访问的这个驻留在服务器内 存里的servl ...