github 的页脚位置问题

Question

我对编程一无所知。所以我这里有一个显示问题。当我直接从 vscode 使用活动浏览器时，我网站的页脚显示在底部的适当位置。但是，当我在 github 页面上打开同一个站点时，我的页脚现在悬停在视口底部上方约两英寸处。

来自 vscode： footer at the bottom

来自 github 页： floating footer

有人知道我在这里应该做什么吗？谢谢！

footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 3em;
  text-align: center;
  font-size: 0.8em;
  color: #cccccc;
  background-color: #0a1612;
  border-top: 7px solid #1A2930;
  font-size: 1em
}

<footer>
  &copy; Copyright 2019 King Major
</footer>

Answer 1

你能检查一下这个页脚吗？如果你喜欢。谢谢

$(window).bind("load", function() { 
       
       var footerHeight = 0,
           footerTop = 0,
           $footer = $("#footer");
           
       positionFooter();
       
       function positionFooter() {
       
                footerHeight = $footer.height();
                footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
       
               if ( ($(document.body).height()+footerHeight) < $(window).height()) {
                   $footer.css({
                        position: "absolute"
                   }).animate({
                        top: footerTop
                   })
               } else {
                   $footer.css({
                        position: "static"
                   })
               }
               
       }

       $(window)
               .scroll(positionFooter)
               .resize(positionFooter)
               
});

* { padding:0px; margin:0px;}

/* Footer */
#footer {
 width: 100%;
 padding: 3em 0px;
 text-align: center;
 font-size: 0.8em;
 color: #cccccc;
 background-color: #0a1612;
 border-top: 7px solid #1A2930;
 font-size: 1em
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>hellooooooo</p>

<footer id="footer">
        &copy; Copyright 2019 King Major
</footer>

Answer 2

你会试试吗？谢谢...

body {
  overflow-x: hidden;
}

footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 3em;
  text-align: center;
  font-size: 0.8em;
  color: #cccccc;
  background-color: #0a1612;
  border-top: 7px solid #1A2930;
  font-size: 1em
}

<footer>
  Copyright 2019 King Major
</footer>

Answer 3

由于您使用的是 position: absolute，页脚相对于其父级，因此当您指定 bottom: 0 时，它会被向下推到父级的底部，并且由于您未明确指定父级的高度，浏览器会对其进行计算（由于您的内容很短，因此会小于 100%）。

因此，要解决此问题，我建议您将 min-height: 100% 设置为正文，然后将 html 设置为可以解决此问题。

body, html {
  min-height: 100%
}

Answer 4

这是我的第二个项目，我有：

html {
    position: absolute
}

删除它后，问题就解决了。感谢大家的耐心等待和帮助！

github 的页脚位置问题

Footer location issue with github

html

css

github

footer

github-pages