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 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...
随机推荐
- OpenStack-Neutron-VPNaaS-测试和使用
准备 确认安全组规则允许vpn协议通过(tcp协议和icmp协议,测试的时候直接设置“进出”全开) 确认两个子网上的vm可以ping通对方路由的外网ip,确认下两个vm是否可以访问外网 测试环境 (1 ...
- Delphi中有关窗口绘制
Invalidate方法通知Windows应该重新绘制表单的整个表面.最重要的是Invalidate不会立即强制执行绘制操作. Windows只是存储请求,并且只会响应它当前程序完全执行后,并且只要系 ...
- MTCNN试用
检测工作想借用MTCNN里的48-net,源码来自CongWeilin Git 下下来就能跑,真是良心 进入pepare_data准备好数据以后进入48-net,目录下有一个pythonLayer.p ...
- Mysql报错:Packet for query is too large (1121604 > 1048576).You can change this value on the server by setting the max_allowed_packet variable
看错误信息,发现1048576个字节,正好是1*1024*1024byte,也就是1Mb. 这正是mysql默认的max_allowed_packet值. 使用sql语句: show VARIABLE ...
- app 开发
移动APP开发 ios Android 中国人写的 MUI 布局框架 HTML5plus 硬件驱动调用(打开摄像头,闪光灯,震动) 和 系统调用(打开相册,通讯录,message) http:/ ...
- K8S学习笔记之ETCD启动失败注意事项
最近搭建K8S集群遇到ETCD的报错,报错信息如下,一定要关闭防火墙.iptables和SELINUX,三个都要关闭!! Mar 26 20:39:24 k8s-m1 etcd[6437]: heal ...
- HBase scan setBatch和setCaching的区别
HBase的查询实现只提供两种方式: 1.按指定RowKey获取唯一一条记录,get方法(org.apache.hadoop.hbase.client.Get) 2.按指定的条件获取一批记录,scan ...
- Java Volatile关键字 以及long,double在多线程中的应用
概念: volatile关键字,官方解释:volatile可以保证可见性.顺序性.一致性. 可见性:volatile修饰的对象在加载时会告知JVM,对象在CPU的缓存上对多个线程是同时可见的. 顺序性 ...
- Base64 空格,加号问题
缘由: 在一个项目中,app请求tcpdump日志与记录的日志内容不一致 请求%2B 识别成 + 请求 + 识别成 空格 这个在base64解密的时候会出现异常,base64需要的是加号,而不是空格 ...
- 智能合约遇到的小错误 network up to date解决办法
https://blog.csdn.net/qindong564950620/article/details/68933678 说 network up to date .这个错误我刚开始不知道怎么解 ...