sticky footer
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的更多相关文章
- CSS Sticky Footer
----CSS Sticky Footer 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. ----另一个解决方法是使用:flexBox布局 http://www.w3c ...
- sticky footer布局,定位底部footer
其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang=&q ...
- 实现sticky footer的五种方法
2017-04-19 16:24:48 什么是sticky footer 如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送. 用position实现? 如果是用 ...
- 两种最常用的Sticky footer布局方式
Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...
- Sticky Footer 绝对底部的两种套路
最近面了好几个前端,工作经验有高有低,居然都不知道绝对底部是什么,也没有人能说出一种实现方式,让我不禁感慨前端领域的良莠不齐 绝对底部,或者说 Sticky Footer,是一种古老且经典的页面效果: ...
- 【CSS】Sticky Footer 布局
什么是 Sticky Footer 布局? Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局. footer 可以是任意的元素,该布局会形成一种当内容不足,footer ...
- 【css技能提升】完美的 Sticky Footer 布局
在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...
- sticky footer布局
一.什么是sticky footer 在网页设计中,Sticky footers设计是最古老和最常见的效果之一.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块 ...
- Sticky Footer,完美的绝对底部
写在前面 做过网页开发的同学想必都遇到过这样尴尬的排版问题:在主体内容不足够多或者未完全加载出来之前,就会导致出现(图一)的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我 ...
- css sticky footer 布局 手机端
什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...
随机推荐
- HBase 笔记1
cap理论: 一致性 可用性 可靠性 任何分布式系统只能最多满足上面2点,无法全部满足 NOSQL = Not Only SQL = 不只是SQL HBase速度并不快,知识当数据量很大时它慢 ...
- NOIP2009(codevs1173)最优贸易
题目大意:给你一张有n个点m条边的有向图,每个点有一个权值,求一条1到n的路径,使得这条路径上存在两个点且他们的权值差最大. 思路:用dis[i]]记录从1到i的路径中所能得到两点间权值差的最大值,然 ...
- http返回状态码含义
http返回状态码 http状态码 200 2开头的都表示这个请求发送成功,最常见的就是200,就代表这个请求是ok的,服务器也返回了. 300 3开头的代表重定向,最常见的是302,把这个请求重定向 ...
- Hadoop -- 概念
hadoop 一个开源的,稳定的,可扩展的,分布式的计算框架 实现单一的服务器到成千上万机器之间共同处理数据的一个可扩展性框架 Hadoop 项目主要包含以下四个模块 Hadoop Common:为其 ...
- Linux基础命令---lprm删除打印任务
lprm lprm指令用来删除当前打印队列上的任务,如果没有指定,那么就删除当前打印任务.您可以指定一个或多个职务ID编号来取消这些职务,或者使用选项”-”取消所有作业. 此命令的适用范围:RedHa ...
- Linux基础命令---accept/reject 允许拒绝发送打印请求
accept accept指令用来设置允许向目标打印机发送打印任务. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora. 1.语法 cupsaccept ...
- tomcat的jks的私钥导出nginx需要的key文件
方法一: 1.先用keytool导出pfx文件.第一个123456是jks密码,后边两个是新生成的pfx的密码 keytool -v -importkeystore -srckeystore D:\\ ...
- mysql awr v1.0.3修正说明以及发布
本版本计划修正或者包含如下内容: 1.innodb buffer_pool只是分配的vm大小,实际并不一定真正使用这么多,还可能会有内存泄露,故调整从innodb_buffer_pool_stats获 ...
- 4. Dubbo原理解析-代理之接口定义 (转)
转载自 斩秋的专栏 http://blog.csdn.net/quhongwei_zhanqiu/article/details/41577159 一:ProxyFactory的接口定义 impo ...
- C# 控件置于最顶层、最底层
btn.BringToFront();//将控件放置所有控件最前端 btn.SendToBack();//将控件放置所有控件最底端