网页的页脚没有延伸到页面的最底部

Posted 2023-03-21

【中文标题】网页的页脚没有延伸到页面的最底部

【英文标题】：Footer of a web page not extending to very bottom of page

【发布时间】：2014-11-30 07:35:50

【问题描述】：

我的问题是我有一个带页脚的网页。如果没有足够的内容来填充整个页面，我希望页面将页脚扩展到浏览器窗口的底部。当内容超过浏览器的高度并且有一个垂直滚动条时，我还希望页脚转到页面的最底部。

由于某种原因，我无法让它工作，我按照此页面上的教程进行操作：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

并且教程特别说明它可以满足我的要求- “在包含大量内容的长页面上，页脚会从可见页面推到最底部。就像普通网站一样，当您一直向下滚动时，它就会出现。这意味着页脚并不总是占用腾出宝贵的阅读空间。”

当我按照教程操作时，当没有足够的内容来填充页面时，它会成功地将页脚放在页面底部，但是当内容过多时，页脚会过早地放置在浏览器窗口最初结束的位置，因为主体和所有容器的高度设置为窗口的高度，而不是整个页面的高度（滚动页面的高度）。

div组织如下：

<div class="everything">
    <div class="main_content"></div>
    <div class="template_footer"></div>
</div>

我的 CSS 代码：

   html, body 
       margin:0;
       padding:0;
       height:100%;
   
   .everything //main container
       width:100%;
       min-width:960px;
       max-width:1450px;
       margin-left:auto;
       margin-right:auto;
       min-height:100%;
       position:relative;
    
    .main_content  //body container
        width:100%;
        position:relative;
        float:left;
    
    .template_footer
        width:100%;
        height:44px;
        background-color:rgba(0, 0, 0, .5);
        position:absolute;
        bottom:0;
    

我还尝试了一堆不同的高度变化，但没有任何效果正常，我搜索了其他问题，他们似乎没有具体回答这个问题。

【问题讨论】：

据我所知，代码工作正常。 jsfiddle.net/xeggwa4q。可能还有其他一些 CSS 覆盖了您在此处提供的内容。

@EternalHour 您发布的代码也适用于我，但这是行不通的：jsfiddle.net/xeggwa4q/1 页脚应该扩展到页面的最底部，但您可以看到它在中间。

@EternalHour 很抱歉，我把最后一个搞砸了，jsfiddle.net/xeggwa4q/2 这已修复，但您可以看到问题仍然存在。

这一定是由于您的屏幕尺寸或浏览器的原因，我觉得它仍然很好。

@EternalHour 即使您将演示中的窗口大小设置得非常小？您应该能够看到页脚随着窗口底部移动，当窗口需要滚动条时，页脚仍将位于窗口底部，而不是可滚动页面的底部。

【参考方案1】：

页脚绝对定位到.everything 容器的底部。 因此，无论内容如何，​​页脚都将覆盖容器底部的 44 像素。

【讨论】：

我知道这一点并且知道如何解决这个问题，但我真正的问题是 .everything 容器的高度只是浏览器窗口的高度，而不是整个页面的高度（高度包括如果有意义的话，它是可滚动的）

是的。 height 属性相对于它的父级，在本例中是 body。以及 html 文档的正文。 html 文档是相对于视口而言的，因此您的容器与视口一样高。

啊，谢谢。我正在寻找一种使父级扩展到页面大小而不是视口的方法，您的评论让我想到了如何将父级扩展到子级的大小，所以我添加了溢出：自动；到一切 div。它现在正在工作。

【参考方案2】：

html 
  margin: 0;
  padding: 0;
  height: 100%;


body 
  min-height: 100%;
  position: relative;


.main 
  padding-bottom: 60px;


.footer 
  position: absolute;
  text-align: center;
  bottom: 0;
  width: 100%;
  height: 60px;

主要部分 padding-bottom 应该大于页脚的高度。页脚部分必须是绝对位置。整个页面的最小高度应为 100%。