Проблема с расположением нижнего колонтитула в github - PullRequest
Новая
       35

Проблема с расположением нижнего колонтитула в github

0 голосов
/ 21 февраля 2020

Я новичок в программировании. Так что у меня есть проблема с отображением. Когда я использую активный браузер непосредственно из vscode, нижний колонтитул моего сайта отображается в нужном месте внизу. Однако, когда я открываю этот же сайт на страницах github, мой нижний колонтитул теперь зависает примерно на два дюйма выше нижней части области просмотра.

От vscode: нижний колонтитул внизу

От github страницы: плавающий нижний колонтитул

Кто-нибудь знает, что мне здесь делать? Спасибо! 

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>

Ответы [ 4 ]

1 голос
/ 21 февраля 2020

Вы бы попробовали это? Спасибо ... 

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>
0 голосов
/ 22 февраля 2020

Это был мой второй проект, и у меня было: 

html {
    position: absolute
}

Как только я удалил это, я решил проблему. Спасибо всем за терпение и помощь!

0 голосов
/ 21 февраля 2020

Поскольку вы используете position: absolute, нижний колонтитул становится относительно его родителя, поэтому, когда вы указываете bottom: 0, он опускается до основания родителя, и поскольку высота родителя не указана вами явно, браузер вычислит его (что будет меньше 100%, так как ваш контент короткий).

Поэтому, чтобы решить эту проблему, я предлагаю вам установить min-height: 100% для тела и html, чтобы исправить проблему. 

body, html {
  min-height: 100%
}
0 голосов
/ 21 февраля 2020

ты можешь проверить этот нижний колонтитул? если хочешь. Спасибо 

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