将元素保留在页面底部

Question

如何将元素保留在页面底部？

应用bottom: 0;可能是一种解决方案，但您如何将其保留在最底层？

示例：http://giphy.com/gifs/80s-guitar-mask-ToMjGpu0xa3M2nHDKWA

在此示例中，尽管有任何浏览器大小，页脚div仍保留在页面底部。

---

这不会将其保留在页面底部，而是将其保留在浏览器窗口的底部：http://jsfiddle.net/8o0xLug9/

Answer 1

如果检查元素，可以看到它是绝对定位的：

#footer {
-webkit-transition: .5s ease-in-out;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
min-width: 967px;
height: 60px;
background-color: #212121;
margin: 0 0 0 0;
}

要保持底部的页脚为position:absolute; bottom:0;

在你的情况下删除min-height：100％;从html标签中使页脚粘贴到页面底部而不是在底部创建更多填充，以避免滚动页面以查看页脚。

添加body { position: relative; }会将页脚添加到页面底部。

Answer 2

真实原因http://giphy.com/gifs/80s-guitar-mask-ToMjGpu0xa3M2nHDKWA页面底部的页脚是内容的高度。

因此，如果您的内容页面内容非常少，则添加最低内容高度可能有所帮助（如下所示）

<section>
main content Area

</section>

使用最小高度

section{
min-height:800px;
}

页脚将自动降至屏幕底部（因为页面长度很大）。