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. vue中mint-ui的index-list 在手机端滑动问题

    官方的demo这里滑动很流畅,按着官网demo复制的在手机上必须手指拖着才能动,不能滑动: 加入 这段代码就行 -webkit-overflow-scrolling: touch; overflow- ...

  2. Java编程基础篇第三章

    逻辑运算符 与(&)(&&),或(||)(|),非(!) &和&&的区别 &:无论&的左边真假,右边都进行运算 &&:当 ...

  3. python--列表，元组，字符串互相转换

    列表,元组和字符串python中有三个内建函数:,他们之间的互相转换使用三个函数,str(),tuple()和list(),具体示例如下所示 >>> s = "xxxxx& ...

  4. 目标检测（四）Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks

    作者:Shaoqing Ren, Kaiming He, Ross Girshick, and Jian Sun SPPnet.Fast R-CNN等目标检测算法已经大幅降低了目标检测网络的运行时间. ...

  5. Docker入门5------生产力工具docker-compose

    参考: https://www.cnblogs.com/neptunemoon/p/6512121.html 待续 安装参见docker-compose官网: https://github.com/d ...

  6. I2C驱动框架 （kernel-3.4.2）

    先用韦老师的图: 注:  新版本内核的i2c驱动框架采用了    i2c_client -------> i2c_bus_type  <-------- i2c_driver   框架 如 ...

  7. Python WebSocket长连接心跳与短连接

    python websocket 安装 pip install websocket-client 先来看一下,长连接调用方式: ws = websocket.WebSocketApp("ws ...

  8. #WEB安全基础 : HTTP协议 | 0x6 初识HTTP报文

    欢迎来到HTTP最精彩的部分 请注意:应用HTTP协议时,必定有一方担任客户端,另一方担任服务器 客户端向服务器发出请求,服务器向客户端返回响应 下面是一个请求与相应的例子: 请求: GET /ind ...

  9. vue安装，router-link的一些属性，用法，tag active-class，to,replace,exex等等

    第一步:$ npm install -g vue-cli 第二部:$ vue init webpack my-projectName 下面内容转载自:https://www.cnblogs.com/c ...

  10. C#简单打印出LIST集合

    循环打印集合,打印数组,随手写写,新手可以看看, 结果是不是有一些多余的0,把  int [][] ints =new int[3][];  改为new int[2][]; 运行出错,哈哈.  int ...