好久没写博客了,刚好今天跨年夜没约到什么妹子,在家宅着不如写点东西好了。

需求

昨天晚上,给公司年会做一个移动端的投票页面,遇到一个UI优化的问题:

· 正文内容少于一屏时,投票提交按钮固定显示在页面底部(如图一)
· 正文内容多于一屏时,投票提交按钮,跟随内容,流式显示在内容下面(如图二)
附图:

 

以前做一些管理后台的时候,底部的版权信息声明就是这样的UI需求,实现思路大概就是:
底部按钮,需要一直显示在底部,可以给body设个最小100%高度,然后用绝对定位把按钮显示在body底边靠上一点的位置,这样内容少的时候,100%的高度起作用,按钮会显示在底部,内容多的时候,内容会把body的高度撑出一屏出现滚动条,而按钮是基于body绝对定位,所以可以跟着滚动条走,一直在内容的底部显示。

关键代码就是这样:

html结构:
html>body>.wrap+.bottom-bar html {
height: 100%;
}
body {
min-height: 100%;
position:relative;
}
.bottom-bar {
position: absolute;
bottom: 0px;
}

本以为轻车熟路,5-10分钟搞定的事情,因为一个bfc的问题,我硬生生调了大半夜,现在记录一下。

问题、意外

按照刚才的写法,内容刚好一屏的时候,提交按钮会挡住文档底部的部分内容,所以这里还需要给body设置一个下边距,值要等于bottom-bar的height。
这个时候问题出来了:
body下的子元素的magin-top和margin-bottom值会影响到body的渲染,进而影响到基于body做相对定位的bottom-bar。

调试一番之后,总结了两点特征,就是块级元素&默认情况下&垂直方向的渲染规则:
· 子元素的margin,会影响父元素的UI渲染,父元素不会被子元素的margin想当然地撑开,就是说渲染上,子元素的margin作用在了父元素上
· 父元素的margin会被子元素的覆盖掉,如果父元素magin值比较小的话,表现就是父元素的margin被子元素的吃掉了

此时,不由得想起来CSS2里面非常弯弯绕的一个概念,BFC。

注:如果BFC小测试 这道题能瞬间答对的话,下面的BFC描述可以直接跳过了。

BFC

之前对BFC模式下margin会折叠的理解仅限于兄弟节点之间,没有意识到父子之间也有这类情况。实话说,多数中文的BFC技术文章里讲的,都是在阐述自己的理解或者抄来抄去,有些讲的模棱两可的,恐怕作者自己都没有搞清楚。

先贴一下mdn和w3的文档供大家参考下:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
https://www.w3.org/TR/CSS21/visuren.html#block-formatting
https://www.w3.org/TR/CSS21/visuren.html#block-level

备注:· 仔细看看w3的介绍,我相信block containers/block boxes/Block-level elements/block-level box这几个词一定会让你看得想要放弃治疗的,哈哈!
· 另,以上英文文档看得比较费劲的,可以再参考另一位同仁对BFC解释的文章:BFC 神奇背后的原理

再次复习了一下BFC的概念之后,我尝试着总结一下我对这个东西的理解:
1. Block formatting context,是一个上下文环境(可以理解为js里的作用域),这个环境中的元素,遵守块级元素的渲染规则。比如:
  · 从上到下排布,各占一行
  · 垂直方向的margin值,会在相邻节点(兄弟或父子)之间被折叠
  · 自身高度不会被子节点的margin撑大
  · 自身高度不会被浮动子节点撑开
2. 一个默认的html文档流中,只有一个上下文环境
3. 如果需要打破1中所述规则,需要创建一个新的上下文(establish new block formatting contexts for their contents),方法是:
  · 适用于父子/兄弟
    float:left/right、position:absolute、display:非block
  · 仅适用于父子
    overflow:非visible

终极方案

新年快要到了,不多说了,结合以上需求和对BFC的再次理解,直接贴代码:

html结构:
html>body>.wrap+.bottom-bar * {
padding:;
margin:;
}
html {
height: 100%;
overflow: auto;
}
body {
position: relative;
overflow: auto;
min-height: 100%;
}
.wrap {
overflow: auto;/*为了防止子元素对body产生影响,这里需要专门开辟一个新上下文*/
margin-bottom: 40px;/*这里也可以加到body去,body{box-sizing: border-box;padding-bottom:40px;}*/
}
.bottom-bar {
position: absolute;
bottom: 0px;
height: 40px;
width: 100%;
}

“fixed+relative==absolute”——对BFC的再次思考的更多相关文章

  1. “fixed+relative≈≈absolute”——对BFC的再次思考

    好久没写博客了,刚好今天跨年夜没约到什么妹子,在家宅着不如写点东西好了. 需求 昨天晚上,给公司年会做一个移动端的投票页面,遇到一个UI优化的问题: · 正文内容少于一屏时,投票提交按钮固定显示在页面 ...

  2. /*透明度设置的两种方式,以及hover的用法,fixed,(relative,absolute)这两个一起用*/

    <!DOCTYPE html> /*透明度设置的两种方式,以及hover的用法,fixed,(relative,absolute)这两个一起用*/ <html lang=" ...

  3. css属性position: static|relative|absolute|fixed|sticky简单解析

    目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...

  4. Position属性四个值:static、fixed、absolute和relative的区别和用法

    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...

  5. css position static | absolute | fixed | relative

    <div id="bigbox1">    <div id="box1" class="box">box1</ ...

  6. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  7. What is the difference between position: static,relative,absolute,fixed

    What is the difference between static,relative, absolute,fixed we can refer to this link: expand

  8. z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

    今天做游戏的Exercise模式的时候,发现把所有的div设置为position:absolute;后,点击play进入到游戏界面的时候,鼠标点击数字的时候,完全没反应.经过我的反复检查,发现只要给所 ...

  9. css的定位,relative/absolute/fixed的用法

    其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...

随机推荐

  1. 来,给Entity Framework热热身

    先来看一下Entity Framework缓慢的初始化速度给我们更新程序带来的一种痛苦. 我们手动更新程序时通常的操作步骤如下: 1)把Web服务器从负载均衡中摘下来 2)更新程序 3)预热(发出一个 ...

  2. 深入理解C#

    简单认识.NET框架    (1)首先我们得知道 .NET框架具有两个主要组件:公共语言进行时CLR(Common Language Runtime)和框架类库FCL(Framework Class ...

  3. DDR的前世与今生(一)

    作者:一博科技 DDR SDRAM全称为Double Data Rate SDRAM,中文名为"双倍数据率SDRAM".DDR是在原有的SDRAM的基础上改进而来,严格的说DDR应 ...

  4. C# Excel导入、导出【源码下载】

    本篇主要介绍C#的Excel导入.导出. 目录 1. 介绍:描述第三方类库NPOI以及Excel结构 2. Excel导入:介绍C#如何调用NPOI进行Excel导入,包含:流程图.NOPI以及C#代 ...

  5. Angular2开发笔记

    Problem 使用依赖注入应该注意些什么 服务一般用来做什么 指令一般用来做什么 angular2如何提取公共组件 angular2为什么不需要提公共组件 父组件与子组件之间如何通讯 什么时候应该使 ...

  6. 【基于WPF+OneNote+Oracle的中文图片识别系统阶段总结】之篇一:WPF常用知识以及本项目设计总结

    篇一:WPF常用知识以及本项目设计总结:http://www.cnblogs.com/baiboy/p/wpf.html 篇二:基于OneNote难点突破和批量识别:http://www.cnblog ...

  7. 整理下.net分布式系统架构的思路

    最近看到有部分招聘信息,要求应聘者说一下分布式系统架构的思路.今天早晨正好有些时间,我也把我们实际在.net方面网站架构的演化路线整理一下,只是我自己的一些想法,欢迎大家批评指正. 首先说明的是.ne ...

  8. C语言可以开发哪些项目?

    C语言是我们大多数人的编程入门语言,对其也再熟悉不过了,不过很多初学者在学习的过程中难免会出现迷茫,比如:不知道C语言可以开发哪些项目,可以应用在哪些实际的开发中--,这些迷茫也导致了我们在学习的过程 ...

  9. can't run roscore 并且 sudo 指令返回 unable to resolve host

    I'm using ubuntu14 LTS. Problems: 1. When run roscore, got a mistake and an advice to ping the local ...

  10. 安装devtoolset

    在运维的工作内,经常要编译安装各种开源组件,以CentOS 6的用户来说,大部分时候用到gcc的时候都是4.4.7版本的,在绝大多数情况下编译一些东西还是够用的,但还是有个别软件对gcc的版本是有要求 ...