Создание нижнего колонтитула CSS либо в нижней части окна браузера, либо в нижней части содержимого

Дублировать этот вопрос.

У меня есть существующий сайт (jacquelinewhite.co.uk), на нем есть нижний колонтитул. В настоящее время этот нижний колонтитул всегда находится под основным контентом. Я пытаюсь сделать его плавающим в нижней части окна браузера, или если содержимое больше, чем окно, оставайтесь внизу содержимого.

Эффективно HTML структурирован следующим образом:

<div id="container">
  <div id="top_bar">
  </div>
<div id="header">
</div>
<div id="left_menu">
</div>
<div id="right_content">
</div>
<div class="clear">
</div>
<!-- FOOTER AREA -->
<div id="footer">
</div>
<!-- END FOOTER AREA -->
</div>

Я пробовал абсолютное положение, нижнее 0, которое помещает нижний колонтитул в нижнюю часть окна, но если содержимое окна больше, то нижний колонтитул покрывает содержимое.

Как мне исправить это?

Ответ 1

Этот всегда работал хорошо для меня: CSS Sticky Footer

Ответ 2

Тест-драйв этого...

  body {
    margin:0;
    padding:0;
    z-index:0;
  }

  #toolbar {
    background:#ddd;
    border-top:solid 1px #666;
    bottom:0;
    height:15px;
    padding:5px;
    position:fixed;
    width:100%;
    z-index:1000;
  }

Ответ 3

Предполагая, что вы используете элемент footer(), я нашел просто добавление этого в CSS, который работал у меня

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}