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. python语法_注释

    #加需要注释的内容,#号后面的单行注释 #这一段注释 左右各三个注释单引号或者双引号 中间的内容为注释,可以包含多行 '''这一段注释''' """这一段注释" ...

  2. python全栈开发 * 26知识点汇总 * 180709

    26 logging collections random 模块 一.logging低配:日志不能写入文件与显示同时进行 import logging logging.basicConfig(leve ...

  3. qemu对虚拟机的内存管理（二）

    上篇文章主要分析了qemu中对虚拟机内存管理的关键数据结构及他们之间的联系,这篇文章则主要分析在地址空间发生变化时,如何将其更新至KVM中,保持用户空间与内核空间的同步. 这一系列操作与之前说的Add ...

  4. Docker入门1------概念和安装

    关于docker的介绍: https://www.cnblogs.com/neptunemoon/p/6512121.html docker入门教程:http://www.docker.org.cn/ ...

  5. Django进阶之QuerySet和中介模型

    QuerySet QuerySet是查询集,就是传到服务器上的url里面的查询内容.其形态类似于Python的列表,列表中的元素是QuerySet对象.支持大部分列表的内置方法. 可切片 QueryS ...

  6. java框架之Spring(3)-JDBC模板使用&事务管理

    下面内容使用到的 jar 包下载 JDBC模板使用 入门 1.导包,如要导入 Spring 的基本开发包.数据库驱动包.Spring 提供的 JDBC 模板包,如下: 2.测试: @Test publ ...

  7. python框架之Django(6)-查询优化之select_related&prefetch_related

    准备 定义如下模型 from django.db import models # 省份 class Province(models.Model): name = models.CharField(ma ...

  8. ZooKeeper之service discovery

    Zookeeper整体介绍 ZooKeeper is a centralized service for maintaining configuration information, naming, ...

  9. Python学习之高级数组（一）

    1.Python基础学习之高级数组(一) 1.1视图:就是与较大数组共享相同数据的较小数组.Numpy包提供数据视图的概念是为了精确地控制内存的使用方式.  数组视图.切片视图.转置和重塑视图等 数组 ...

  10. Deeplab v3+中的骨干模型resnet（加入atrous)的源码解析，以及普通resnet整个结构的构建过程

    加入带洞卷积的resnet结构的构建,以及普通resnet如何通过模块的组合来堆砌深层卷积网络. 第一段代码为deeplab v3+(pytorch版本)中的基本模型改进版resnet的构建过程, 第 ...