sticky footer布局
一、什么是sticky footer
在网页设计中,Sticky footers设计是最古老和最常见的效果之一。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。
二、应用场景案例
如下:
当页面内容不够长,比较少时,’X’关闭按钮粘贴在视窗底部;当内容够多时,“X”按钮会被往下推送,它不会遮盖住内容。这就是饿了么点击物品是弹出一个全屏的详情页,点击关闭按钮关闭的实现。
我们将内容填的很多时,它就出现了滚动条,移动滚动条将内容移到底部,我们可以看到“X”按钮被推动到内容的下面了。
三、实现
HTML:
<div v-show="detailShow" class="detail">
<div class="detail-wrapper clearfix">
<div class="detail-main">
<p>合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看
合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看
合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看
合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看
合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看
合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看
合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看
合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看
合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看
合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看
合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看
合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看
合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看
合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看
合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看
合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看
合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看
</p>
</div>
</div>
<div class="detail-close">
<i class="icon-close"></i>
</div>
</div>
CSS:
.detail {
position: fixed;
top:;
left:;
z-index:;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(7,17,27,0.8);
}
.detail-wrapper {
min-height: 100%;
}
.detail-wrapper .detail-main {
margin-top: 32px;
/* 关键在于这里设置了padding-bottom */
padding-bottom: 64px;
}
.detail-close {
position: relative;
width: 32px;
height: 32px;
margin: -64px auto 0 auto;
clear: both;
font-size: 32px;
}
1、当页面内容不多时(detail-main的内容不多时)让“X”按钮粘贴在窗口底部:
detail-wrapper与detail-close是同一级的,detail-wrapper的min-height:100%占满全屏,既然detail-wrapper占满全屏了,我们为什么还会看到detail-close呢,在窗口下方出现呢?因为detail-close的position:relative,它是不脱离标准文档流的,所以他的占位空间任是排在detail-main块下面,但是我们给detail-close设了一个负的margin-top(margin-top: -64px),所以他就出现在我们的视线里即窗口的下方。
2、当页面足够多时,让“X”按钮被内容推动到下面:
关键在于detail-main设了一个padding-bottom给detail-close(即为关闭按钮)提供了一个放在上面的空间,避免detail-close负的margin-top(margin-top:-64px)使detail-close遮盖了内容,detail-close利用负的margin-top就显示在了内容的下面。
sticky footer布局的更多相关文章
- 两种最常用的Sticky footer布局方式
Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...
- 【CSS】Sticky Footer 布局
什么是 Sticky Footer 布局? Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局. footer 可以是任意的元素,该布局会形成一种当内容不足,footer ...
- 【css技能提升】完美的 Sticky Footer 布局
在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...
- css sticky footer 布局 手机端
什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...
- 前端经典布局:Sticky footer 布局
什么是Sticky footer布局?前端开发中大部分网站,都会把一个页面分为头部区块.内容区块.页脚区块,这也是比较.往往底部都要求能固定在屏幕的底部,而非随着文档流排布.要实现的样式可以概括如下: ...
- sticky footer布局,定位底部footer
其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang=&q ...
- css sticky footer 布局
方法一:footer 上用负的 margin-top 在内容外面需要额外包一层元素(wrap)来让它产生对应的 padding-bottom.是为了防止负 margin 导致 footer 覆盖任何实 ...
- sticky footer 布局
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...
- css sticky footer布局
Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送.套路为:内容 ...
随机推荐
- angularJS笔记之 服务
angular的服务有五种 第一种 constant 一般作为一种常量的服务 不可更改 第二种 value 用来注册服务对象或函数 可更改 第三种 factory 创建和配置服务的最快捷方式.可更改 ...
- 使用class-dump
[使用class-dump] 对于未加壳的Mach-O文件,class-dump可以从Mach-O的section中还原出objc代码的头文件.下面做一些关键演示,以及对关键问题进行说明. 1.标准用 ...
- DataSet、DataTable转换List(泛型集合与DataSet互相转换 )
using System.Data; using System.Reflection; using System.Collections; using System.Collections.Gener ...
- laravel的模型关联之(一对多的反向)
一对多的反向 一对多的反向就相当于,一个用户有多篇文章,但是在显示文章模型的时候你又想显示这个用户的用户名,但是你只有用户id, 这时候就用到了一对多的反向,你用用户(User)模型里面定义了一对多来 ...
- #Pragma Pack与内存分配
博客转载自:https://blog.csdn.net/mylinx/article/details/7007309 #pragma pack(n) 解释一: 每个特定平台上的编译器都有自己的默认“对 ...
- Apache rotatelogs命令
一.简介 rotatelogs 是 Apache 自带的管道日志程序,可以完美的实现日志的轮转功能. 二.语法 Usage: rotatelogs [-v] [-l] [-L linkname] [- ...
- LINUX 查看CUP温度
在Linux下可以通过lm_sensors来查看CPU的温度(当然你的硬件首先要支持),要使用这个功能要有内核相关模块(比如I2C)的支持,下面说一下操作方法: 先看一下你的机器上是否安装了lm_se ...
- SpringMVC——异常处理
Spring MVC 通过 HandlerExceptionResolver 处理程序的异常,包括 Handler 映射.数据绑定以及目标方法执行时发生的异常. SpringMVC 提供的 Handl ...
- sql2008调试存储过程
拿上篇存储过程为例: 在意个窗口里面写上exec Proc_MoveUpOrDown2 'id',3,1,'tableName,'orderid' 按F11,有个黄色的箭头会指向该行, 再按F11会跳 ...
- 在IE11(Win10)中检查up6.2配置
1.按F12,打开调试模式 2.打开调试程序选项卡 说明:在调试程序选项卡中可看到IE加载的脚本信息是否正确.因为IE有缓存,导致脚本有时不是最新的. 3.打开脚本,up6.js ...