如何将页脚粘到底部？有点扭曲 [英] How to stick footer to bottom? With a little twist

问题描述

所以基本上我想在页面底部粘上页脚

So basicly i want to stick footer on the bottom of my page

但是我的页面的内容是动态的，所以在某些情况下内容很长，一些情况下它是短的

But the content of my page is dynamic, so in some cases the content is long, in some cases it is short

我通过谷歌搜索并发现了很多结果，但当我尝试它，它们工作时内容短，但如果内容long它会粘在窗口底部（不是页面）并且重叠内容

I've searched through google and found many results, but when i try it, they work when the content is short, but if the content is long it will stick on the bottom of the window (not page) and overlap the content

这不要紧，如果它使用javascript，但如果你有纯CSS会更好

It's not matter if it uses javascript, but if you have the pure CSS ones it will be better

推荐答案

这不使用固定位置，所以它不会总是显示在您的视口底部。

This doesn't use a fixed position so it won't always show up at the bottom of your viewport.

来自这里的CSS

您还可以查看有关此此处

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

这篇关于如何将页脚粘到底部？有点扭曲的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！