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位于页脚的正上方。实际上，当我编辑边缘底部时，这是负责任的，但我想知道如何从底部没有空间制作页脚。同时div for box的CSS是：

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

当我做保证金底部：140px时，它显示最后的页脚。但是我还是想知道如果内容是短的还是大的，如何在底部制作没有空间的页脚。

请分享您的知识！

Answer 1

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

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

方法1：始终在底部

如果您尝试将其始终放在底部，则可以设置

footer {
  position: absolute;
  bottom: 0;
}

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

方法2：min-height

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

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

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

Answer 2

要检查的另一件事，并且不那么明显（我最近对此挣扎）是确保你没有页脚内容，即页脚内部的元素，悬挂在页脚下方。如果您的页脚中有一个高度高于页脚高度的容器，就会发生这种情况。

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

Answer 3

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

Answer 4

您需要在网站的body标记之外添加页脚标记，并在您的body元素中添加min-height:100%;，然后在页脚元素中添加position:absoulte; bottom:0;。这样做总是会显示页面底部的页脚是内容很短，如果它很长，它会被html推下来。

我实际上已经在这里回答了类似的事情：

HTML/CSS Footer troubles

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

4 个答案: