css-显示页脚下方有大量空间

请参阅此链接中的图像：

https://docs.google.com/document/d/1r9L9eLBddMOdHAP3KfAx8ND-SF8b8zBl53o88aUbHT4/edit?pli=1 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 时，它在末尾显示页脚。但我仍然想知道如何使页脚位于底部而不与底部留有空间，无论内容是短还是大。

请分享您的知识！

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

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

方法一：始终在底部

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

footer {
  position: absolute;
  bottom: 0;
}

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

方法2：最小高度

您还可以设置一个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 属性设置为 ''，将它们从内联样式中删除，从而将它们恢复到定义的设置）。

这是一个带有短文本的演示 http://jsfiddle.net/scrimothy/BXC6t/ and 一篇长文本 http://jsfiddle.net/scrimothy/BXC6t/1/