Я хочу показать нижний колонтитул на нижней странице

Question

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

Мой CSS:

html{
    min-height: 100% !important
    position: relative !important
}

#footer{
    background-color: #30373d
    width: 100%
    position: relative
    height: auto
}

<div id="footer"></div>

Любой может помочь m

Answer 1

Вместо работы с нижним колонтитулом работайте с контентом. Учитывая, что нижний колонтитул имеет фиксированный размер, вы можете быть уверены, что содержание тела всегда будет занимать хотя бы часть пустого экрана минус размер нижнего колонтитула. Например, вы можете указать минимальную высоту содержимого следующим образом:

.content {
 min-height: calc(100vh - footerDimension)
}

Answer 2

Просто добавьте обертку вокруг вашего контента и присвойте ему свойство min-height:100vh; (или любой другой высоты, которая соответствует вашему фактическому макету), как показано ниже.

Если вы хотите, чтобы нижний колонтитул всегда отображался внизу страницы установите значение positon:absolute;

body {
  padding: 0;
  margin: 0;
}

#wrapper {
  min-height: 100vh;
}

footer {
  min-height: 100px;
  width: 100%;
  background: black;
}

<div id='wrapper'>
  very little content
</div>
<footer></footer>