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

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

Ответы на вопрос(3)

Решение Вопроса
 Ryan R. Rosario25 нояб. 2017 г., 05:47
К сожалению, ссылка сейчас мертва.

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

  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;
  }
 ilivewithian06 мар. 2009 г., 12:32
Спасибо, это не совсем то, что мне нужно, я бы хотел, чтобы нижний колонтитул отображался вместе с содержимым, а не всегда с сайтом внизу окна.

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

html, body {
  height: 100%;
}

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

footer {
  margin-top: auto;
}

Ваш ответ на вопрос