Как сделать так, чтобы окно авторских прав прилипало к нижней части страницы

Question

Я относительно новичок в кодировании и HTML.

Я пытаюсь заставить этот контейнер придерживаться нижней части страницы (не экрана, а страницы)

т. е. страница, которая прокручивает достаточную длину и контейнер находится внизу, а также страница, которая не требует прокрутки, контейнер все еще находится внизу.

У меня есть этот код:

<div class="copyright-container"><div class="vert-align"><p class="headline">
Copyright &copy; 2017 RyanTeaches - All Rights Reserved.</p></div></div>

.copyright-container{
 box-sizing: border-box;
padding-right:20px;padding-left:20px;
background-color: black;
text-align: center;
position:absolute;
bottom:0;
width:100%;
height:150px;
    color: white;

Проблема с абсолютным состоит в том, что, хотя это прекрасно работает на страницах с небольшим содержанием, и на странице, где мне приходится прокручиваться, она тоже прокручивается вверх - она ​​находится внизу экрана, а не внизу страницы.

Я также попытался использовать "исправлено", но это означало, что контейнер оставался на экране все время.

Затем я попробовал "относительный", и хотя это работало правильно для страницы, которая нуждалась в прокрутке, и сел внизу, страница с небольшим содержанием, она оказалась посередине страницы.

ура

Answer 1

Чтобы решить вашу проблему, вам нужно использовать javascript:

Поместите элемент как обычно в конец потока, и он будет в нижней части страницы, как вы хотите: Однако, когда содержимое слишком маленькое, вам нужно расположить свой элемент фиксированным, чтобы он находился внизу экрана. Вы можете сделать это после загрузки страницы.

Это делает что-то подобное в JQuery:

$( window ).load(function() {
  if ($(window).height() > $('#content').height() + $('#navigation').height()) {
    $('.copyright-container').css({
      position: 'fixed'
      bottom: 0
    });
  }
});

Надеюсь это поможет!