页脚应该留在底部，并保持在固定的位置，即使浏览器调整大小 [英] Footer should stay at the bottom and remain in a fixed position even if the browser resizes

问题描述

我有一个页脚，有几个按钮，停留在页面的底部，从页面底部的60px的高度，无论上面的内容是什么或窗口的大小是多少....工作正常。这里是我使用的CSS：

I have a footer with few buttons which stays at the bottom of the page at a height of 60px from the bottom of the page no matter what the content above is or how much the size of the window is....that is working fine. Here is the CSS I am using:

#container
{
    min-height: 100%;
    height: 100%;
    position: relative;
}
#footer
{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px; /* Height of the footer */ 
}
#wrap
{
    min-height: 100%;
    max-height: 100%;
}

现在，问题是如果我调整窗口大小的容器可滚动容器内的所有控件都会按预期滚动），但页脚仍然位于页面底部的60px，最终与容器控件重叠。我希望页脚保持在底部，只有当我向下滚动到页面底部才可见...希望我清楚的问题！

NOW, the problem is if I am resizing the window the container becomes scrollable (all the controls inside the container scrolls as per expected) but the footer still remains at 60px from the bottom of the page and eventually overlaps the container controls. I want the footer to remain at the bottom and should be visible only when I scroll down till the bottom of the page...Hope I am clear with the question!!!

推荐答案

@pronay sharma，可能你想要一个粘性页脚。

@pronay sharma , may be you want an sticky footer.

检查以下链接：

Sticky Footer CSS问题

http://css-tricks.com/snippets/css/sticky-footer/

http://www.cssstickyfooter.com/

CSS粘滞页脚实现的问题

这篇关于页脚应该留在底部，并保持在固定的位置，即使浏览器调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！