2

请参阅此链接中的图像：

https://docs.google.com/document/d/1r9L9eLBddMOdHAP3KfAx8ND-SF8b8zBl53o88aUbHT4/edit?pli=1

在上面的图片链接中，我已经用黑色矩形覆盖了页脚，我希望它应该始终位于最后一个，而底部没有任何边距。

实际上，当我删除页脚上方的 div 时，问题就出现了。我给你负责这个的代码：

HTML

<div id="footer">
<div class="shell">
      <!--content here-->
    </div>
     </div>

CSS

.shell { width:988px; margin:0 auto; }
  #footer { height:44px; background:url(images/footer.gif); line-height:44px;
     color:#fff;              
       }
     #footer a{ color:#fff; }

div-box 的 css 位于页脚上方。实际上，当我编辑边距底部时，这是负责任的，但我想知道如何在底部没有空间的情况下制作页脚。同时 div-box 的 CSS 是：

    .box { background:#fbfcfc; height:100%; padding:1px; margin-bottom:10px; }

当我做margin-bottom：140px时，它在最后显示页脚。但我仍然想知道如何在底部没有空间的情况下在底部制作页脚，无论内容是短还是大。

请分享你的知识！

4

3 回答 3

3

更新：我的一个同事刚刚遇到了类似的问题，我只是碰巧认为这一次可能只用 CSS 就可以很容易地回答这个问题。一个简单的基于高度的媒体查询在这里非常适用于“一个应该位于内容底部的页脚，除非内容比视口短，在这种情况下，页脚应该与视口的底部对齐”时刻。如果是这样的话。可能这应该最有效：http ://codepen.io/scrimothy/pen/qEivg

最后，使用媒体查询高度并确定视口高度是高于还是低于主体和页脚的高度。然后使用媒体查询以不同方式处理这些事件，如链接所示。

方法一：永远在底部

如果你想让它总是放在底部，你可以设置

footer {
  position: absolute;
  bottom: 0;
}

但是，这意味着如果您的页面内容比视口长，那么您将与在页脚文本后面运行的正文发生冲突。

方法2：最小高度

您还可以将 a 设置min-height为您的正文内容 div，以便您可以估计您认为用户视口的位置：

.body-content {
  min-height: 580px;
}

这不会总是得到它，因此您可能在正文内容和页脚之间有太多空间（将页脚推到折叠下方），或者如果用户有一个更高的视口，您仍然可能在页脚和视口底部之间留有间隙窗口超出您的预期。

方法 3：jQuery（两全其美）

如果您已经在您的站点中使用 jQuery，那么这就是您要走的路。

var pageHeight = $('body').height(),
  footerHeight = $('footer').height();
if (pageHeight < $(window).height() - footerHeight) {
  $('footer').css({
    'position': 'absolute',
    'bottom': '0'
  });
} else {
  $('footer').css({
    'position': '',
    'bottom': ''
  });
}

如果它是一个长页面，这将允许您的页脚与您的内容正常对齐，如果它是一个短页面，它将使用上面的方法 1。（将 css 属性设置为 ''，将它们从内联样式中删除，从而将它们放回其定义的设置）。

这是一个带有短文本的演示 和一个带有长文本的演示

于 2012-10-23T17:28:57.037 回答
1

另一件需要检查但不太明显的事情（我最近遇到了这个问题）是确保你没有页脚内容，即页脚内的元素，悬垂在页脚下方。如果您的页脚中有一个高度高于页脚高度的容器，则可能会发生这种情况。

这可以通过作为 Firefox Web Developer 插件的一部分的 Inspector 工具来检测。检查器在您悬停的每个元素周围放置一个虚线边框，您可以查看是否有段落或 div 之类的东西悬停在页脚下方的空间中。

于 2013-11-23T14:30:19.760 回答
0

我最近遇到了一个类似的问题 - 事实证明，主包装容器没有设置为溢出：隐藏，这立即为我解决了问题，也许在尝试将页脚设置为绝对位置之前仔细检查作为一个选项。

于 2015-02-11T11:49:34.063 回答