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

Question

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

У меня есть существующий сайт ( 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, который помещает нижний колонтитул в нижнюю часть окна, но если содержимое окна больше, то нижний колонтитул покрывает содержимое.

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

Answer 1

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

Answer 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;
  }

Answer 3

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

html, body {
  height: 100%;
}

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

footer {
  margin-top: auto;
}