Закрепить футер внизу при отсутствии прокрутки на странице

Question

к примуре страница:

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_examples_material

я заменил футер на

<div id="myFooter" class="w3-container w3-theme" style="padding:16px;  bottom: 0; position: fixed;  bottom: 0; text-align: center; width:100%;">
  <p>Footer information goes here</p>
</div>

В этом случае футер всегда закреплен внизу окна, если со "style" убрать "position: fixed" то если содержимое меньше окна - футер подскакивает. Что мне нужно заменить или прописать, чтобы при наличии прокрутки по вертикали футер скролился вместе со страницей, а если содержимое было меньше окна то футер крепился внизу страницы?

Answer 1

Если высота футера задана, то можно сделать так. Способ такой себе, но один из самых простых. Ссылку на более интересные способы Вам уже скинули в комментариях к вопросу.

.root {
  min-height: calc(100vh - 50px);
  background: blue;
}

footer {
  height: 50px;
  background: red;
}

<div class="root">
Маленький body
</div>
<footer>
Футер внизу
</footer>

БЛОГ НА HUSL

Закрепить футер внизу при отсутствии прокрутки на странице

Ответы (1 шт):