CSS粘性底部

原文:A CSS sticky footer
作者:Ryan Fait

我E文不好,不过代码看的懂
该文实现粘性居底的核心方法,就是负margin
先用一个容器wrapper包住除footer以外的内容
将wrapper的高度设置为100%,再用负的margin空出footer高度
如此实际wrapper的高度应等于100%-footer.height
效果达成

作者在HTML中加了一个和footer一样高度的push容器
没理解什么意思,可能是用来hack的。谁知道的话,我们探讨一下

把代码贴上

HTML:



Your website content here.




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 */
}

CSS粘性底部》上有1条评论

发表评论

电子邮件地址不会被公开。