css-显示页脚下方有很多空间

Question

查看此链接中的图片:

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。实际上，当我编辑 margin-bottom 但我想知道如何制作没有底部空间的页脚时，这是负责任的。同时，div-box 的 CSS 是:

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

当我执行 margin-bottom:140px 时，它在末尾显示页脚。但我仍然想知道如何在底部制作页脚而不留底部空间，无论内容是短还是大。

请分享您的知识!

Answer 1

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

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

方法一:始终在底部

如果你想让它一直停留在底部，你可以设置

footer {
  position: absolute;
  bottom: 0;
}

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

方法二:最小高度

您还可以为您的正文内容 div 设置一个 min-height，这样您就可以估算出您认为用户视口(viewport)的位置:

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

这不会总是得到它，所以你可能在正文内容和页脚之间有太多空间(将页脚推到折叠下方)或者如果用户应该在页脚和视口(viewport)底部之间仍然有间隙有一个比您预期的更高的窗口。

方法 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 属性设置为 ''，将它们从内联样式中删除，从而将它们放回到它们定义的设置中)。

这是一个 demo with short text和 one with long text