html - 页脚不是 'always' 粘在底部

Question

我正在处理的这个网页的页脚在大多数页面上都贴在底部，除非内容比“应该的”大。

错误的页面是:*一个好的页面是:*

我尝试了多种将页脚固定在底部的方法，但结果各不相同。

这是来自 Drupal 7.x 的 Zen starterkit 模板。

Answer 1

问题不在于页脚。你有这个 CSS 强制 #wrapper 和 #subwrapper 元素的高度为 1100px，这就是为什么它看起来像页脚“下面”的东西。

#wrapper{
  position: absolute;
  left: 0px;
  top: 240px;
  width: 100%;
  height: 1100px; /* This is making the page longer than it should be.*/
  background: #85bb99;
  z-index: -5;
}

#wrapper #subwrapper {
  background: url('/themeimages/pattern-cutout.png');
  opacity: 0.2;
  width: 100%;
  height: 1100px; /* Same thing here */
}

看起来您正在将这些元素用作背景图像。您可以通过尝试使用此 CSS 来修复它:

#wrapper{
  position: fixed; /* Use fixed positioning so it'll always be displayed */
  left: 0px;
  width: 100%;
  height: 100%; /* Set a height of 100% */
  background: #85bb99;
  z-index: -5;
}

#wrapper #subwrapper {
  background: url('/themeimages/pattern-cutout.png');
  opacity: 0.2;
  width: 100%;
  height: 100%; /* Set a height of 100% */
}