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. ERROR org.hibernate.hql.internal.ast.ErrorCounter unexpected token: form 异常解决

    ERROR org.hibernate.hql.internal.ast.ErrorCounter unexpected token: form 异常解决 根据异常提示:我找了我的MySQL语句:果然 ...

  2. iota

    这算法由SGI专属,并不在STL标准之列.它用来设定某个区间的内容,使其内的每一个元素从指定的value值开始,呈现递增状态.它改变了区间内容,所以是一种质变算法. template <clas ...

  3. java动态加载配置文件(申明：来源于网络)

    java动态加载配置文件 地址:http://blog.csdn.net/longvs/article/details/9361449

  4. ubuntu下设置mysql自启

  5. ZOJ 4067 - Books - [贪心][2018 ACM-ICPC Asia Qingdao Regional Problem J]

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=4067 题意: 给出 $n$ 本书(编号 $1 \sim n$), ...

  6. （三）juc高级特性——虚假唤醒 / Condition / 按序交替 / ReadWriteLock / 线程八锁

    8. 生产者消费者案例-虚假唤醒 参考下面生产者消费者案例: /* * 生产者和消费者案例 */ public class TestProductorAndConsumer { public stat ...

  7. gcd最大生成树模板

    出处: ACM International Collegiate Programming Contest, Egyptian Collegiate Programming ContestArab Ac ...

  8. redis问题与解决思路

    问题现象: 集群状态 1主 2从,主没有开启bgsave,从开启bgsave.现象所有redis可以访问,进行操作.主不断开始bgsave 1从停止bgsave. 主日志报错# Connection ...

  9. 51单片机和STM32单片机区别在那里

    ​大部分朋友可能都知道51单片机和stm32单片机也知道一般入门会先学习51单片机在学习stm32单片机会简单一些,但是对于51单片机和stm32单片机的具体区别却不知道了,有些人觉得没必要,但是我个 ...

  10. JMeter学习-041-响应数据中文乱码解决方法

    华夏子孙,中文为母语.因而在接口测试过程中,响应数据含有中文是再也正常不过的事情.同时,初学JMeter的童鞋,经常会遇到响应数据中中文乱码的问题. 本文中提供两种方式的修正方法,仅供大家参考,谢谢. ...