github上的页脚位置问题

Question

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

来自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

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

因此，为了解决此问题，建议您将min-height: 100%设置为正文和html，以解决此问题。

body, html {
  min-height: 100%
}

Answer 2

您可以检查此页脚吗？如果你喜欢。谢谢

$(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 3

您会尝试吗？谢谢...

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 4

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

html {
    position: absolute
}

一旦删除，我就解决了这个问题。感谢大家的耐心配合和帮助！