将页脚保持在页面底部，但根据需要使页面增长

Question

我有一个页脚的CSS代码：

.footer {
    width:100%;
    margin:0 auto;
    padding-top:20px;
    padding-bottom:40px;
    position:absolute !important;
    bottom:0; !important;
}

我需要做的是能够使页面增长，因为页脚上方的元素像文本框或其上方的内容一样增长。但是，上面的代码使页脚粘贴，上面的元素与页脚重叠。

是否有针对此类场景的快速CSS修复或者需要jQuery？

Answer 1

您正在寻找粘性页脚：请查看my article。

它是用波兰语编写的，但你同时也很容易理解CSS和XHTML。随意使用它。 ：）

Answer 2

Check这个;

Sticky Footer

或者具体而言，您可以在页脚上使用 CSS 这些属性：

footer {
  position: relative;
  z-index: -2;
  height: 300px;
  background: none repeat scroll 0% 0% #31353A;
  font-size: 12px;
  color: #CCC;
  text-align: center;
}

将主要内容设置为position: relative;时

仅 我希望它有所帮助。

Answer 3

JSfiddle link

.site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.site-content {
  flex: 1;
}