Относительный нижний колонтитул с абсолютными элементами DIV

Question

Я создаю тему WordPress, где заголовок и панель навигации расположены абсолютно, а нижний колонтитул должен быть расположен относительно в зависимости от высоты содержимого на каждой странице. Однако, когда я пытаюсь установить положение нижнего колонтитула относительно, оно появляется вверху страницы под содержимым. Все элементы находятся в относительно позиционированном контейнере. Есть ли способ исправить это или динамически получить высоту содержимого плюс заголовок и панель навигации?

Структура страницы следующая:

<div id="container">
    <div id="header">
    </div>
    <div id="navbar">
    </div>
    <div id="content">
        Dynamically generated and variable height content here. 
    </div>
    <div id="footer">
    </div>
</div>

И соответствующий CSS:

#container {
 position: relative;
 margin: 0px auto;
 width: 945px;
 text-align: left;
}

#header, #navbar {
 background-color: #FFFFFF;
 position: absolute;
 margin-right: auto;
 margin-left: auto;
 width: 945px;
 float: left;
}

#footer {
 height: 35px;
 margin-right: auto;
 margin-left: auto;
 width: 945px;
 position: relative;
 padding-top: 20px;
}

Спасибо за помощь.

Answer 1

Это может показаться очевидным, но связанные элементы расположены относительно их обычной позиции, а абсолютные элементы расположены "к первому родительскому элементу, который имеет позицию, отличную от статической".

Ваш нижний колонтитул расположен относительно, поэтому он пытается найти нижнюю часть ближайшего предыдущего элемента. Ближайший относительный элемент - это content, поэтому нижний колонтитул находится прямо под нижней частью этого div (вы не можете увидеть #content из-за белого фона заголовка). Содержимое div также расположено относительно, а ближайший относительный элемент - #container, который также не имеет высоты.

Зачем вам абсолютно необходим заголовок и панель навигации? Нужны ли они в середине экрана? Тогда я могу предложить поместить их в отдельный div с полем: 0 auto;.

Answer 2

Код, который вы разместили, недействителен, попробуйте добавить ";" после padding-top в нижнем колонтитуле и посмотрите, работает ли он.

#footer {
  height: 35px;
  margin-right: auto;
  margin-left: auto;
  width: 945px;
  position: relative;
  padding-top: 20px;
 }

Answer 3

попробуйте изменить положение нижнего колонтитула на абсолютное и добавить дно: 0px; в стиле нижнего колонтитула