как сохранить этот div в нижней части сайта?

Question

У меня большая проблема на моем сайте (на основе Joomla и бесплатного шаблона). Когда я иду на эту страницу: http://bit.ly/2mv4pC Я должен установить поле от {p.stickynote} до {margin-bottom: 300px; } для того, чтобы исправить проблему моего .

Если вы просто попытаетесь играть с {margin-bottom: 300px; } , так что вы увидите поведение этого , удаление этого поля заставит этот div появляться в центре моей страницы.

Я добавил эти свойства {bottom: 0px;} {position: fixed;} до {div style = "bottom: 0px;" id = "footer-cover"} но фон "Черный баннер внизу" все тот же.

Есть ли какие-либо предложения по исправлению в нижней части сайта?

Answer 1

Мне кажется, я не совсем понимаю ваш вопрос, но я все равно догадаюсь. Я думаю, вы хотите, чтобы ваш "черный баннер" находился в нижней части окна просмотра браузера, а не на самой странице, как в чате-баре на Facebook.

Итак, чтобы сделать это, вы делаете это:

<style>
  #header{}
  #content{margin-bottom:100px} /*to make room for the footer*/
  #footer{height:100px; position:fixed; bottom:0}
</style>

<div id="header" />
<div id="content" />
<div id="footer" />

Answer 2

Проблема в том, что без поля снизу высота страницы короче границ окна, поэтому ваш div нижнего колонтитула заканчивается, и тело страницы просвечивает.

Какого эффекта вы хотите достичь? Хотите, чтобы нижний колонтитул перекрывал содержимое и всегда был виден? Или вы хотите, чтобы нижний колонтитул всегда был внизу страницы?

Для первого:

#footer-cover {
  position: fixed;
  background-color: #000;
  bottom: 0px;
}

body {
  background-color: #F5F5F5;
}

Для второго:

• Вы хотите использовать метод липкого нижнего колонтитула, похожий на this (Спасибо за лучшую ссылку ZJR), я не могу вспомнить все детали этого, но это связано с установкой отрицательного поля. Это немного хаккей, но работает нормально.

---

Надеюсь, это близко к тому, чего вы пытаетесь достичь.