html标签和body标签有什么不同？

Question

有一个页脚，让他实现不管页面主体有没有内容都是在最低下，
给body和html设置样式，出现了两种不同的效果，不知是怎么回事？

footer{
   position:absolute;
   bottom:0;
   left:0;
   width:100%;
   height:50px;
}

如果body标签设置成

body{
   position:relative;
   min-height:100%;
}

如果给html设置

html{
   position:relative;
   min-height:100%;
}

Answer 1

先吐槽一下楼主的问法：

给body和html设置样式，出现了两种不同的效果，不知是怎么回事？

这能叫问题么？

正确的问法应该是：
1.我想实现实现一个元素总是在浏览器窗口的最下面。我的的思路是这样的（贴上自己的代码）
但是发现给html和body分别设置position: relative;出现的效果不同，效果是这样的。（贴上效果）请问原因是什么？
2.有没有更好的办法？

---

答：
1.《CSS权威指南》中给出了这样一句话：

设置为绝对定位的元素相对于属性不是position: static;的祖先元素进行定位。如果没有设置，则根据html或body元素进行定位。至于是哪一个有用户代理（浏览器）决定。

大致是这个意思。回头找出书来给你补上。
测试了一下IE8，Firefox，Opera，Safari for windows，都是相对于html定位。

这也就是为什么使用html和body元素出现不同效果的原因。
你设置了body元素的高度为100%,但body的高度是相对于HTML的高度，html的默认高度为零。相对定位也就不能正常显示。

看图（body为零）

再看图（因为body高度为零，footer{bottom:0;},于是就有了这样的渲染）

2.@radius已经回答了，先对于浏览器窗口定位。

---

Answer 2

默认情况下 body的高度并不是100%显示的，想要测试可以通过body{border:20px solid #ccc}查看。

Answer 3

我认为差异应该是在对body写样式的时候，采用了min-height属性带来的。
如果html没有一个既定的高度，那么将无法正确解释body的这个带百分比的min-height属性。

Answer 4

你直接设置页脚
position:fixed;
bottom:0
就好了