Проблемы нижнего колонтитула: не может сдержать - PullRequest
Новая
       0

Проблемы нижнего колонтитула: не может сдержать

1 голос
/ 25 мая 2011

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

Кто-нибудь видит, что я пропускаю или делаю неправильно?

Вот живой пример: http://glustik.com/essex/index.html

Любая помощь будет БОЛЬШОЙ!

Я бы прикрепил код CSS с {}, но он всегда ломается для меня.

Ответы [ 6 ]

4 голосов
/ 25 мая 2011

Я чувствую, что CSS исправить это все еще будет проблематично, я бы соблазнился переписать все это: разметку HTML и CSS, в противном случае я подозреваю, что в будущем будет больше проблем.

ЗдесьВот некоторые вещи, которые скорее всего доставят вам неприятности:

  • Дублирование id значений (как уже упоминалось)
  • Ненужное absolute позиционирование
  • Жестко заданная высотазначения в нескольких делениях
  • Ненужное использование div "clearfix"
  • Чрезмерное использование отрицательных полей для компенсации заполнения других элементов (всегда проблематично)
  • Незначительно, но актуально: использованиеклассы типа floatRight, такие же плохие, как и использование встроенных стилей.

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

Удачи!

РЕДАКТИРОВАТЬ : очевидно, яЭто оказалось бесполезным, поэтому я чувствовал, что должен добавить прямой ответ: для быстрого исправления просто получить нижний колонтитул внизу:

  • Удалите отступы высоты и дна от #mainBody

(протестировано в FF4 и IE8).В нижнем колонтитуле все еще будут некоторые проблемы с заполнением, но это может быть решено несколькими способами в зависимости от того, как вы хотите к нему подойти.Еще раз удачи в вашем проекте.

2 голосов
/ 25 мая 2011

Нижний колонтитул расположен абсолютно в #container, что относительно. следовательно, он расположен в нижней части #container.

попробуйте переместить его из #container или удалить относительное позиционирование из # контейнера

1 голос
/ 25 мая 2011

Поскольку все содержимое вашего основного контейнера (#mainBody) является плавающим, контейнер может определить его высоту только через свойство height, для которого установлено значение 100px;. Нижний колонтитул правильно отображается прямо под высотой 100 пикселей основного контейнера.

У вас есть три варианта:

  1. вы можете либо правильно очистить ваш основной контейнер, чтобы его высота была динамической в ​​зависимости от его содержимого, используя такой код, как this
  2. или вы можете установить высоту основного контейнера на что-то большее. Я изменил его на 700px, и нижний колонтитул отображается хорошо ниже основного тела.
  3. или вы можете полностью удалить height, что, вероятно, будет лучшим решением в долгосрочной перспективе. Спасибо @Gaby aka G. Petrioli за указание на это.
0 голосов
/ 25 мая 2011

Вы должны хотя бы взглянуть на Компас. Это делает CSS намного проще. Для вашего конкретного вопроса, посмотрите на:

http://compass -style.org / ссылка / компас / макет / sticky_footer /

0 голосов
/ 25 мая 2011

Внесите следующие изменения, и для меня в Chrome будет получено:

  • удалить bottom:0; из #footer
  • изменить padding-bottom:167px; в #mainBody на желаемоеместоположение (я использовал 455px, и это выглядело довольно хорошо)
0 голосов
/ 25 мая 2011

Я давно этим занимаюсь и никогда не слышал об этом методе.Это не делает ничего плохого, но в настоящее время в моих кругах принята версия от Райана Фейта (http://ryanfait.com/resources/footer-stick-to-bottom-of-page/)

Если вы загрузите это в Chrome и отключите положение: относительно контейнера оно правильно приклеиваетсянижний колонтитул внизу страницы. Это сигнализирует мне о проблеме, потому что это противоречит тому, что говорится в учебнике. Несмотря на это, оно достигает вашей цели.

...