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. swust oj 1068

    图的按录入顺序深度优先搜索     5000(ms)         10000(kb)   Tags: 深度优先     图的深度优先搜索类似于树的先根遍历,即从某个结点开始,先访问该结点, 然后深 ...

  2. Nginx负载均衡后端健康检查

    参考文档:https://www.cnblogs.com/kevingrace/p/6685698.html 本次使用第三方模块nginx_upstream_check_module的,要使用这个第三 ...

  3. python练习题-day8

    1.有如下文件,a1.txt,里面的内容为: 老男孩是最好的培训机构, 全心全意为学生服务, 只为学生未来,不为牟利. 我说的都是真的.哈哈 分别完成以下的功能: a,将原文件全部读出来并打印. wi ...

  4. Windows平台分布式架构实践 - 负载均衡（转载）

    Windows平台分布式架构实践 - 负载均衡 概述 最近.NET的世界开始闹腾了,微软官方终于加入到了对.NET跨平台的支持,并且在不久的将来,我们在VS里面写的代码可能就可以通过Mono直接在Li ...

  5. 20190412 T-SQL语言二

    Use xsxk;WITH c_count(id,xb,rs)AS (SELECT 班级,性别,count(*)FROM XS GROUP BY 班级,性别 ) SELECT * FROM c_cou ...

  6. 关于.net里面的静态html页面和接口组合使用的网站

    在网站的根目录下,主要有三部分组成.①接口里面的bin文件夹②接口③html里面的页面. html里面有ajax请求接口的js代码.另外接口里面的web.config不需要拷贝到网站根目录去. 如下截 ...

  7. dubbo注册到zookeeper

    zk注册中心安装,参见dubbo官网:http://dubbo.apache.org/books/dubbo-admin-book/install/zookeeper.html provider.xm ...

  8. 记录一则xtts测试遇到的诡异现象

    背景:在一次xtts的测试中遇到因源库数据文件名称包含特殊字符导致表空间全量备份缺失文件,之所以说是诡异现象,是因为xtts的全备日志不报任何错误,在恢复阶段才发现缺少文件,这个缺陷比较隐晦,尤其在迁 ...

  9. 用 MoveTowards实现多点移动

    using System.Collections; using System.Collections.Generic; using UnityEngine; public class MoveCube ...

  10. Vue系列之 => 路由匹配

    路由基本使用,加动画切换 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...