标签：style blog http color os io 使用 ar strong
原文地址：http://blog.davidqiu.com/post/2013-06-17/40051753968
解决方法
在解决的时候，我查了相当多的资料。如果用纯 CSS 的话，似乎都指向一种叫 Sticky Footer的方法。不过网上的基本都是抄来抄去，只有代码，没有解释什么的，我就不吐嘈了。
原理解析
这种方法的原理很简单，用到了 2 个属性：min-height 和 margin。
其中，min-height 都有个很奇特的属性值：100%。这个属性值是指当前浏览器窗口的高度，实际上就是能显示的最大高度（一个屏幕的高度）了。那么自然可以联想到，如果将内容部分设成“min-height: 100%”，就能够将内容部分占有一个屏幕的高度，那么页脚起码会在屏幕的外面。只要稍加改进，便能融入 Header、Content、Footer 这三个部分，并使得 Footer 起码在屏幕的最底部，而且当内容长度增加时，会在页面的最后面，而不至于遮挡内容。
可是要注意的是，“100%”的这个属性对于“height”或者“min-height”来说有点奇怪，它在使用之前貌似要对“100%”的定义进行初始化。而我们知道，“html”这个结点是沾满一个屏幕的，那么就要先写这样的内容：
|
1
2
3
4
|
body, html{ height: 100%;} |
一个值得关注的是，如果我们用的是 ASP.NET 框架，因为它是基于 form 的，所以仅仅设置 body 和 html 还不够，还要设置 form 的相应属性：
|
1
2
3
4
|
form{ height: 100%;} |
而为了页眉与页脚紧贴浏览器边框，我们还要设置相关的 margin 与 padding 为 0，以防止空隙的出现。而为了简单起见，就对全局所有的容器都设置这样的一个默认值吧。
|
1
2
3
4
5
|
*{ margin: 0; padding: 0;} |
好了，到了这里就可以放心地去用“min-height: 100%;”了。
那么怎么解决在内容很少的时候，页脚能够显示在浏览器的最底部，而不是什么情况都被置于一个屏幕的高度之外呢？
可能看到上面的第 2 个我说的要使用的属性，大家就大概明白了。对，就是用 margin 这个属性。不过要声明的一点是，下面的方法用到了一些不太符合规范的方法，就是加多了一个空 div 用作显示格式定制，而其本身不起任何作用。
先看看网页的 html 文本来了解一下框架吧：
|
1
2
3
4
5
6
|
<div class="Wrapper"> <div class="Header"></div> <div class="Content"></div> <div class="FooterPush"></div></div><div class="Footer"></div> |
可见，页眉与内容都被一个叫“Wrapper”的容器包着，然后在他们后面有个叫“FooterPush”的东西，其实这个就是我之前说的仅用于控制显示格式的空 div 了。然后，Footer 是置于所有内容之外的。
然后我们这样思考：如果 FooterPush 的高度与 Footer 相同，然后 Footer 有一个“margin-top”的属性，它的值是 Footer 的高度的负值，即例如 Footer 的高度是 120px，然后：
|
1
2
3
4
5
6
7
8
9
10
|
.Wrapper .FooterPush{ height: 120px;} .Footer{ margin-top: -120px; height: 120px;} |
那么发生的情况将会非常神奇，实际上就是 Footer 刚好就覆盖在 FooterPush 的上面了。那么这个时候，我们只要将 Wrapper 的高度设为“100%”，这样所有的东西就至少能够在一个屏幕内现实完毕了。
这样，就能够达到当内容少时，Footer 最高能够在一个屏幕的最底部显示；而当内容比较长的时候，Footer 能够很乖巧地在所有内容的后面，而不至于遮挡内容。
OK，大工告成了吧！那我就贴个完整些的代码吧。
完整代码
Html：
|
1
2
3
4
5
6
7
8
9
10
|
<body><form> <!-- 如果用的是 Asp.Net 就可能会有这个结点 --> <div class="Wrapper"> <div class="Header"></div> <div class="Content"></div> <div class="FooterPush"></div> </div> <div class="Footer"></div></form></body> |
CSS:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
*{ margin: 0; padding: 0;} html, body, form{ height: 100%;} .Wrapper{ min-height: 100%;} .Wrapper .FooterPush { height: 120px; /* Footer 的高度 */ } .Footer{ clear: both; /* 清除浮动元素格式 */ position: relative; margin-top: -120px; /* Footer 高度的负值 */ height: 120px;} |
标签：style blog http color os io 使用 ar strong
原文地址：http://www.cnblogs.com/songmz/p/3962739.html
