CSS粘性底部
原文：A CSS sticky footer
作者：Ryan Fait
我E文不好，不过代码看的懂
该文实现粘性居底的核心方法，就是负margin
先用一个容器wrapper包住除footer以外的内容
将wrapper的高度设置为100%,再用负的margin空出footer高度
如此实际wrapper的高度应等于100%-footer.height
效果达成
作者在HTML中加了一个和footer一样高度的push容器
没理解什么意思，可能是用来hack的。谁知道的话，我们探讨一下
把代码贴上
HTML:
- <html>
- <head>
- <link rel="stylesheet" href="layout.css" ... />
- </head>
- <body>
- <div class="wrapper">
- <p>Your website content here.</p>
- <div class="push"></div>
- </div>
- <div class="footer">
- <p>Copyright (c) 2008</p>
- </div>
- </body>
- </html>
CSS:
- * {
- margin: 0;
- }
- html, body {
- height: 100%;
- }
- .wrapper {
- min-height: 100%;
- height: auto !important;
- height: 100%;margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */
- }
- .footer, .push {
- height: 4em; /* .push must be the same height as .footer */
- }
这个方案比reallazy那个更好。
[Reply]