html - 在不使用固定位置的情况下将页脚设置为页面底部。

Question

这让我发疯 我无法弄清楚为什么我的页脚出现在不同的高度，即使它是在 _Layout View 中定义的。我有以下 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:(_Layout)

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

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

    </div>

如何让 div 保持在页面的最底部。我希望它位于所有内容下方。不覆盖任何内容，所以如果我添加另一个 div，脚将始终是页脚。我的问题示例:

我想要的:

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

Answer 1

您需要将页脚放置在 fixed 位置，然后将其高度 (110px) 从 body 或包含元素的底部偏移(因为它是从正常文档流)，例如: .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>

可变页脚高度(响应式关注)

如果页脚高度根据屏幕宽度而变化，请引用此答案:Keeping footer at bottom of responsive website

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

无固定页脚

但是如果你需要一个absolute定位的页脚，添加position: relative到包含元素(.container.body-content)，因此 .footer 的 bottom: 0 值总是相对于 .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 包含替代版本