css sticky footer布局
Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。
套路为:内容层和页脚层
1.内容层需要有一个外层wrapper 并且清除浮动,需要设置min-height: 100% 使之撑满整个屏幕 --->detail-wrapper
2.外层wrapper里面的内容detail-main,需要设置paddding-bottom把页脚层的位置留出来,让页脚不会覆盖内容
3.页脚的内容detail-close需要设置margin: -64px auto 0 auto 来防止detail-wrappe内容充满整个屏幕,并且设置clear:both清除浮动
<div class="detail-wrapper clearfix">
<div class="detail-main"></div>
</div>
<div class="detail-close" @click="closeDetail">
<i class="icon-close"></i>
</div>
css sticky footer布局的更多相关文章
- css sticky footer 布局 手机端
什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...
- css sticky footer 布局
方法一:footer 上用负的 margin-top 在内容外面需要额外包一层元素(wrap)来让它产生对应的 padding-bottom.是为了防止负 margin 导致 footer 覆盖任何实 ...
- 【CSS】Sticky Footer 布局
什么是 Sticky Footer 布局? Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局. footer 可以是任意的元素,该布局会形成一种当内容不足,footer ...
- 【css技能提升】完美的 Sticky Footer 布局
在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...
- CSS Sticky Footer
----CSS Sticky Footer 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. ----另一个解决方法是使用:flexBox布局 http://www.w3c ...
- 两种最常用的Sticky footer布局方式
Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...
- 前端经典布局:Sticky footer 布局
什么是Sticky footer布局?前端开发中大部分网站,都会把一个页面分为头部区块.内容区块.页脚区块,这也是比较.往往底部都要求能固定在屏幕的底部,而非随着文档流排布.要实现的样式可以概括如下: ...
- CSS Sticky Footer: 完美的CSS绝对底部
CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案.在CSS的世界里,似乎没有完美这种说法.所以,现在介绍的CSS绝对底部,只是目前个人见过的方案中比较完美的吧. 先说我们为什么会使用到这个C ...
- sticky footer布局,定位底部footer
其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang=&q ...
随机推荐
- Application received signal SIGABRT
Application received signal SIGABRT (null) (( 0 CoreFoundation 0x0000000182bbadc8 <redacted> + ...
- TX2 Clone
由于给TX2配置了很多的开发环境,也修改了一些驱动,想将这些环境能够完整的迁移到一块bare TX2,于是尝试了clone的方法. 这种方法的优点是: 确保了移植的TX2 与已经配置好的环境是一致的: ...
- Python中的split,rsplit,splitlines
https://www.cnblogs.com/zhangzengqiang/p/7525175.html
- Hibernate 环境配置和依赖添加(使用java web和普通javaSE工程)
1.Hibernate依赖包的添加 File---->Project Structure,按照如图所示操作,导入所依赖的jar包. 2.生成hibernate.hbm.xml的配置文件 (1)点 ...
- MyBatis模糊查询相关
Mybatis模糊查询的实现不难,如下实例:在UserMapper.xml中根据用户名模糊查询用户: <!-- 模糊查询用户 --> <select id="findSom ...
- PIE SDK地图放大镜
放大镜,在地图的浏览过程中在主地图和次地图中起到很好的辅助作用, 要实现放大镜功能主要就是通过两个mapControl控件,主地图控件是mapControlMain,放大镜控件是UserControl ...
- oracle 基础知识(十)----exp/imp--->>>>>expdp/impdp
一,简介 存活下来的远古级别的导入导出软件exp/imp ,软件多数使用于oracle 9i 之前 到了10g以后基本全面被数据库泵(Data Pump)取代,即expdp/impdp.本文会分别介 ...
- linux输出之 printf 讲解--->与 echo 的区别
printf 你接触过printf没呢?? 如果你学了c语言的话你肯定就熟悉了,如果没有的话,不要急,,我保证你马上就会了! 我们来看一下案例: 这个可以看出来吧,echo输出的话会对文本换行哦,但是 ...
- 【Tensorflow】 Object_detection之准备数据生成TFRecord
参考:Preparing Inputs 1.PASCAL VOC数据集 数据集介绍: PASCAL Visual Object Classes 是一个图像物体识别竞赛,用来从真实世界的图像中识别特定对 ...
- DP Intro - Tree DP Examples
因为上次比赛sb地把一道树形dp当费用流做了,受了点刺激,用一天时间稍微搞一下树形DP,今后再好好搞一下) 基于背包原理的树形DP poj 1947 Rebuilding Roads 题意:给你一棵树 ...