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）（因为它从正常的文档流中取出），< strong>例如： .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），以便bottom: 0的{{1}}值为总是相对于.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>包含替代版本

Answer 2

对.footer css

使用position: fixed而不是position: absolute

Answer 3

将位置更改为

.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标签中作为元素放置在网页中的位置，而不是将它们放在正常的流程中，就像处理页脚标记一样在页面的末尾。

Answer 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;
}

Answer 5

一种非常简单的方法是将您的身体内容包装在<div class ="myContent">

中

.myContent{
    padding-bottom: 40px;
    min-height: 70%;
}



 footer {
    width: 80%;
    height: 10%;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    }

正文内容太短或太长，页脚都停留在底部，不需要固定位置。

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

5 个答案: