如何确保我的页脚一直显示在页面末尾而不是中间？答案

【问题标题】：How do I make sure that my footer shows all the way at end of the page rather than in the middle?如何确保我的页脚一直显示在页面末尾而不是中间？
【发布时间】：2013-02-17 06:26:38
【问题描述】：

这是我的页脚 CSS：

 .footer {
      background-color: #CACACA;
      font-size: 20px;
      height: 50px;
      padding-top: 10px;
      position: absolute;
      text-align: center;
      width: 100%;
      }

在多个页面上，我都有包含文本的容器。在某些页面上，只有足够的内容，页脚才会出现在页面末尾。但在某些情况下，内容不足，因此页脚仍显示在容器下方，但与页面末尾之间存在间隙。我该如何解决这个问题，以便无论容器的长度如何都能调整？

【问题讨论】：

你试过了吗：底部：0px？
@mario 我试过 margin-bottom: 0px;
我已经添加并更新了我的答案，现在您可以看到它包含大量内容并且几乎没有任何内容。祝你好运！
@connormiles 谢谢老兄！我会看看我是否可以使用它并将您发布在这里！
@KPO：我没有写页边距。你必须设置位置，而不是父级的空间:)

标签： html css footer

【解决方案1】：

没有看到相应的 HTML，很难猜测您的问题可能是什么。听起来您的主要内容上有一个底部边距，当该主要部分内只有有限的内容时，它会将页面底部向下推到页脚之外。

要解决此问题，请调整该边距或更改页脚的位置。目前，位置是绝对的，这意味着页脚是根据其在 HTML 中的父元素定位的。将定位切换为相对将使它出现在 HTML 中任何元素的后面。

我建议您在尝试进一步解决该问题之前阅读more about CSS positioning。

【讨论】：

【解决方案2】：

像这样

  <!DOCTYPE html>
<html>
<head>
    <title>My Amazing Footer</title>
    <style>
    html, body {
       margin:0;
       padding:0;
       height:100%;
    }
    .wrapper {
       min-height:100%;
       position:relative;
    }
    footer{
        background:#F1F1F1;
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height:300px;
    }

    footer p{
        text-align: center;
        padding-top:100px;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="Content">
            <p>HTML Ipsum Presents</p>
        </div>
        <footer>
            <p>&copy; My Website 2013. All Rights Reserved!</p>
        </footer>

    </div>
</body>
</html>

看到我们在包装器中有页脚，页脚绝对位于包装器的底部和左侧，然后我们只需将页脚的高度添加到包装器底部填充以及包装器和主体上的一些默认高度，然后排序，看看这里的 jsfiddle - http://jsfiddle.net/eTwJh/2/，这里是没有内容的 - http://jsfiddle.net/eTwJh/3/

【讨论】：