html:

<div class="detail">
<div class="detail-wrapper">
<div class="detail-main"></div>
</div>
<div class="detail-close">
<span class="iconfont icon-guanbijiantou"></span>
</div>
</div>

css:

.detail{
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(7, 17, 27, .8);
}
.detail-wrapper{
min-height: 100%;
}
.detail-main{
margin-top: 64px;
padding-bottom: 64px;
}
.detail-close{
position: relative;
width: 32px;
height: 32px;
margin: -64px auto 0 auto;
clear: both;
font-size: 32px;
}

sticky footer的更多相关文章

  1. CSS Sticky Footer

    ----CSS Sticky Footer 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. ----另一个解决方法是使用:flexBox布局  http://www.w3c ...

  2. sticky footer布局,定位底部footer

    其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang=&q ...

  3. 实现sticky footer的五种方法

    2017-04-19 16:24:48 什么是sticky footer 如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送. 用position实现? 如果是用 ...

  4. 两种最常用的Sticky footer布局方式

    Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...

  5. Sticky Footer 绝对底部的两种套路

    最近面了好几个前端,工作经验有高有低,居然都不知道绝对底部是什么,也没有人能说出一种实现方式,让我不禁感慨前端领域的良莠不齐 绝对底部,或者说 Sticky Footer,是一种古老且经典的页面效果: ...

  6. 【CSS】Sticky Footer 布局

    什么是 Sticky Footer 布局? Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局. footer 可以是任意的元素,该布局会形成一种当内容不足,footer ...

  7. 【css技能提升】完美的 Sticky Footer 布局

    在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...

  8. sticky footer布局

    一.什么是sticky footer 在网页设计中,Sticky footers设计是最古老和最常见的效果之一.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块 ...

  9. Sticky Footer,完美的绝对底部

    写在前面 做过网页开发的同学想必都遇到过这样尴尬的排版问题:在主体内容不足够多或者未完全加载出来之前,就会导致出现(图一)的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我 ...

  10. css sticky footer 布局 手机端

    什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...

随机推荐

  1. windows程序设计 获取系统文件路径

    获取系统文件路径,打印到txt文件中. #include <windows.h> int WINAPI WinMain( HINSTANCE hInstance, HINSTANCE hP ...

  2. Oracle时间日期函数

    ORACLE日期时间函数大全 TO_DATE格式(以时间:2007-11-02   13:45:25为例)           Year:              yy two digits 两位年 ...

  3. [Android] 转-RxJava+MVP+Retrofit+Dagger2+Okhttp大杂烩

    原文url: http://blog.iliyun.net/2016/11/20/%E6%A1%86%E6%9E%B6%E5%B0%81%E8%A3%85/ 这几年来android的网络请求技术层出不 ...

  4. C#串口通信遇到的坑

    C#串口通信中有一个DataReceived事件可以委托一个接收函数.此接收函数是运行在辅线程(secondary thread)上的.如果要在这个函数中修改主线程中的一些元素,比如UI界面上的变量的 ...

  5. <转>jmeter(二十三)分布式测试

    本博客转载自:http://www.cnblogs.com/imyalost/category/846346.html 个人感觉不错,对jmeter讲解非常详细,担心以后找不到了,所以转发出来,留着慢 ...

  6. go中 -strconv包的使用

    strconv 包中的函数和方法 // atob.go ------------------------------------------------------------ // ParseBoo ...

  7. Navigation包中的move_base和amcl实现自动驾驶

    安装功能包: 1.安装导航定位包navigation $ sudo apt-get install ros-indigo-navigation 2.由于导航包在/cmd_val下发布的移动数据加速度会 ...

  8. webform ajax 异步请求

    第一种就是对应方法的请求 虽然对应方法 但还是会刷新页面 webform是基于事件的 每次请求都会出发pageload <script> $(function () { $("# ...

  9. JavaScript if 条件语句

    JavaScript if 条件语句 使用: if(条件){ }else if(条件){ }else if(条件){ }else{ } 示例: // 判断相等 if(1==1){ } // 判断不等 ...

  10. expect拷贝文件例子

    ----安装expectcd /tmp wget http://core.tcl.tk/tcl/zip/release/tcl.zipwget https://jaist.dl.sourceforge ...