HTML 代码
下面是HTML代码的基本结构,footer <div>标签在wrap <div>标签的外面。
<div id="wrap">
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>
页面内容可以放在main <div>标签的内部。例如,下面是两列悬浮页面布局的HTML代码;
<div id="wrap">
<div id="main" class="clearfix">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
<div id="footer">
</div>
Header放在wrap的里面,main的上面,如下所示;
<div id="wrap">
<div id="header">
</div>
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>
如果你需要在wrap或者footer的外面放一些元素,他们必须使用绝对位置;否则,页面上计算好的100%的高度会被弄乱掉。
CSS 代码
下面的CSS代码使页脚紧贴在页面的底部。
html, body, #wrap {height: 100%}
body >#wrap {height: automin-height: 100%}
#main {padding-bottom: 150px} /* must be same height as the footer */
#footer {position: relative
margin-top: -150px/* negative value of footer height */
height: 150px
clear:both}
你会发现,页脚的高度在这里被重复使用了三次,这是至关重要的,而且三个高度必须使用同样的值。wrap <div>的height属性把自己拉伸至窗口全部高度的尺寸,负的margin会把footer提高到main <div>的padding的位置上去,因为main已经在wrap的里面,所以main的padding已经是wrap 100%高度的一部分。 这样,footer就留在页面的底部了。
现在还不算完成,我们还需要去clearfix main <div>。
Clearfix Hack to the Rescue
多数SS designers对Clearfix Hack很熟悉,它解决了很多元素悬浮的问题,在这里,我们用它使得Google Chrome里面的页脚紧贴页面底部。它同时也解决了两列悬浮布局所带来的问题。这样你就可以把内容放在一列,sidebar放在另一列,不会出现个别浏览器下面main <div>里面的悬浮的内容导致页脚浮上来的情况。
下面的代码也加入到我们的 stylesheet 里面去;
.clearfix:after {content: "."
display: block
height: 0
clear: both
visibility: hidden}
.clearfix {display: inline-block}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%}
.clearfix {display: block}
/* End hide from IE-mac */
如果你比较喜欢Ryan Fait的方法,添加额外的push <div>,在多列悬浮的页面中,同样需要用到clearfix。
*sticky属性 与relative类似 但是其offset实根据最近的拥有scrolling box的先祖元素来确定的,如果没有拥有scrolling box的话会根据viewport来计算
那么什么是scrolling box呢?
An HTML scrollbox is basically a box with scrollbars. Usually the scrollbox is made using the HTML <div> tag and the scrollbars are defined using the CSS overflow property. (From https://www.html.am/html-codes/scrollboxes/html-scrollbox.cfm )
姑且理解为
含有滚动条的或者含有overflow属性的皆为scroll box(试了下当设置为auto,overlay,sroll的时候会产生效果,估计就是所谓的scroll box)
实践:
1.设置父元素overflow:auto,子元素设置为sticky且top:10px
可以看到sticky的元素根据距其最近的具备scoll box的父元素计算offset
2.去除overflow:auto
可以看到之前设置的top属性无效了,找不到先祖元素为scrollbox的了,故基于viewport来计算offset:
看到有些文章说设置overflow:auto或者hidden不会生效,特地试了下发现是有效的..很疑惑。
1.auto
2.hidden
可以看到定位属性还是产生了效果。(到底是sticky还在生效还是已经类似于relative效果,待研究)
还是基于父元素为scroll box:
1.对于块级兄弟元素(位于普通文档流中)
前一个节点为block元素,自身为sticky,不会覆盖前面普通文档流中的元素
2.对于块级兄弟元素(脱离文档流::float)
对于脱离文档流的元素(float或者absolute)会直接按祖先元素的顶部开始计算
sticky VS fixed
1.先来看 fixed
2.再来看sticky, 去除父元素overflow(使之根据viewport计算)
可以看到当给其父元素设置固定高度后,sticky元素会受制于父元素的高度,即最多到达父元素的底部
浏览器兼容性:
*仅为个人学习之用
Ref: https://www.w3.org/TR/css-position-3/#sticky-position