Вопрос размещения нижнего колонтитула на веб-странице

Question

У меня есть footer div, который находится под всем кодом прямо перед </body> тег. Я хочу, чтобы он отображался после всего на странице, автоматически спускаясь, если на одной странице больше контента, чем на другой.

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

Вот код, который я использую

Нижний колонтитул CSS:

.footer{
    width:100%;
    background: #263238;
    height:250px;
    margin-top: 150px;
    color:#FFFFFF;
    font-family: Tahoma; 
    border-top: 10px solid #455A64;
}

Разве div не должен отображаться ниже всего автоматически, поскольку его код находится после каждого содержимого на странице?

Answer 1

Попробуй это. Установите высоту верхнего и нижнего колонтитула и соответственно отрегулируйте размер основного элемента.

main {
  height: calc(100% -(HEADER_HEIGHT + FOOTER_HEIGHT);
}

html {
  height: 100%;
  margin: 0;
}

body {
  margin: 0;
}

main {
  position: relative;
  min-height: 100%;
  height: calc(100% -100px);
  display:flex;
  justify-content:center;
}

header,footer {
  height: 50px;
  background-color: #555;
  text-align:center;
  color:#ccc;
   display:flex;
  justify-content:center;
  align-items:center;
  
}

footer {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
}

<header> Header</header>
<main>Body</main>
<footer>Footer</footer>