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

【问题标题】：Set Footer to Bottom of Page without using Fixed Position.在不使用固定位置的情况下将页脚设置为页面底部。
【发布时间】：2018-03-28 10:21:39
【问题描述】：

这让我发疯了我无法弄清楚为什么我的页脚出现在不同的高度，即使它是在 _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 的问题，但没有一个或解决问题。

【问题讨论】：

"CSS for Fixed Footer"、"Fix footer to bottom of page" 和 How do you get the footer to stay at the bottom of a Web page? 可能重复

标签： html css asp.net-mvc twitter-bootstrap

【解决方案1】：

使用position: fixed 而不是position: absolute 用于.footer css

【讨论】：

我试过了。它使页脚在我滚动时浮动，因此它始终停留在页面中间
CSS 是什么？对于 .body-content
将 bottom: 0 和 left: 0 更改为 bottom: 0px 和 left: 0px
使用position: relative，但请注意，如果你的身体至少没有占据屏幕的高度，它看起来会很奇怪
@Akerra 然后将您的主要内容部分视为具有最小高度。这样一来，内容很少的非常小的页面就不会显得太挤了。

【解决方案2】：

改变位置

.footer {
    position: relative;
    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;
}

最好的办法是将您的页眉、主要内容和页脚放在一个 div 标签中，作为网页中元素的位置，而不是将它们放在正常的流程中，例如在页脚标签的末尾处理页面。

【讨论】：

【解决方案3】：

你需要定位你的页脚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>

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

如果页脚高度根据屏幕宽度变化，参考这个答案：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 包括替代版本

【讨论】：

感谢职位：absolute完美解决了
很高兴听到这个消息！

【解决方案4】：

另一种方法是给主包装器一个最小高度，这会将页脚向下推。该最小高度应该是屏幕高度减去其他高度（页脚、导航等高度）。 Fiddle here.

HTML：

<body>
<div id="header">Nav area</div>
<div id="main">Main content to be here</div>
<div id="footer">Footer be here</div>  
</body>

CSS：

#header{
  height:30px
}
#main{
  min-height:calc(100vh - 60px);
}
#footer{
  height:30px;
}

【讨论】：