将页脚设置为页面底部而不使用固定位置。

Question

这让我发疯，我无法弄清楚为什么我的页脚出现在不同的高度，即使它是在 _Layout 视图中定义的。我有以下CSS：

.footer {
    position: absolute;
    bottom: 0;
    background-color: #ffd800;
    width: 100%;
    text-align: center;
    left: 0;
    background-image: url(/Content/SiteImages/logosmall.png);
    background-repeat: no-repeat;
    height: 110px;
    border-top: 3px solid #082603;
}

    .footer p {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
        color: #082603;
        font-size: 150%;
        font-family: 'Baskerville Old Face'
    }

HTML:(_布局)

 <div class="container body-content">
        @RenderBody()

        <div class="footer"><p>Quote</p> </div>

    </div>

我怎样才能让div停留在页面的最底部。我希望它位于所有内容下方。不覆盖任何内容，因此如果我添加另一个 div，脚将始终是页脚。我的问题示例：

我想要的是：

请帮助我在多个页面上保持一致。我在 stackoverflow 上查看了很多问题，但没有解决问题。

Answer 1

您需要定位页脚，然后从正文或包含元素的底部fixed偏移其高度（ ）（因为它是从正常文档流中取出的），例如：110px .container.body-content {padding-bottom: 110px;}

.container.body-content {
    padding-bottom: 110px;
    height: 1000px; /* Force height on body */
}

.footer {
  position: fixed;
  bottom: 0;
  background-color: #ffd800;
  text-align: center;  
  right: 0;
  left: 0;
  background-image: url(/Content/SiteImages/logosmall.png);
  background-repeat: no-repeat;
  height: 110px;
  border-top: 3px solid #082603;
}

.footer p {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: #082603;
  font-size: 150%;
  font-family: 'Baskerville Old Face'
}

<div class="container body-content">

  <div class="footer">
    <p>Quote</p>
  </div>

</div>

改变页脚高度（响应关注）

如果页脚高度根据屏幕宽度而变化，请参阅此答案：将页脚保持在响应式网站的底部

CodePen 中演示的解决方案：https ://codepen.io/anon/pen/BoNBZX

无固定页脚

但如果您需要absolute定位页脚，请添加position: relative到包含元素 ( .container.body-content)，以便bottom: 0的值.footer始终相对于.container.body-content。

.container.body-content {
    height: 1000px; /* Force height on body */
    position: relative;
}

.footer {
  position: absolute;
  bottom: 0;
  background-color: #ffd800;
  text-align: center;  
  right: 0;
  left: 0;
  background-image: url(/Content/SiteImages/logosmall.png);
  background-repeat: no-repeat;
  height: 110px;
  border-top: 3px solid #082603;
}

.footer p {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: #082603;
  font-size: 150%;
  font-family: 'Baskerville Old Face'
}

<div class="container body-content">

  <div class="footer">
    <p>Quote</p>
  </div>

</div>

编辑：position: absolute包括替代版本