Переместите нижний колонтитул в конец страницы, не используя «positition: absolute; bottom: 0»

Question

Поэтому я пытаюсь всегда размещать нижний колонтитул внизу страницы, не используя «position: absolute», так как он перекрывает содержимое страницы, когда экран становится меньше.Я также не хочу использовать «position: fixed», так как я не хочу, чтобы нижний колонтитул был виден постоянно.Когда я использую «position: родственник», он создает пустое пространство под нижним колонтитулом, и я не могу удалить его.Я был бы очень признателен, если бы вы могли мне помочь.В настоящее время я использую Bootstrap 4 для своего проекта.Вот мой код:

<div class="container">
(some content)
</div>
<footer>
(some content)
</footer>

css

footer {
    position: relative;
    bottom: 0;
    width: 100%;
    background-color: grey;
    text-align: center;
}

Заранее спасибо.

Answer 1

Сравните document.scrollingElement.scrollHeight и window.innerHeight в js.

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

, если document.scrollingElement.scrollHeight больше, чем window.innerHeight, то это означает, что ваш контент больше, чем порт представления, поэтому, не беспокоясь, вы можете разместить нижний колонтитул внизу безиспользуя свойство position.

Если изменение размера окна является вашей проблемой (изменение размера может изменить высоту вашего документа), тогда вы можете использовать обработчик изменения размера окна.Там вы можете вызвать функцию для выполнения вышеупомянутых шагов.

Answer 2

Используйте фиксированное положение вместо абсолютного с фиксированным нижним колонтитулом всегда внизу страницы.И нижний 0, то он всегда будет внизу.Если что-либо перекрывает нижний колонтитул, вы можете сделать z-index до 100 или выше, чтобы ничто не перекрывало нижний колонтитул.