Блог

Главная - Вопросы по программированию - Проблемы с нижним колонтитулом: не удается сохранить это

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

#html #css #footer

#HTML #css #нижний колонтитул

Вопрос:

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

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

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

Любая помощь была бы ОТЛИЧНОЙ!

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

Комментарии:

1. Не ответ, но просто чтобы вы знали: id значения должны быть уникальными (никакие два не должны совпадать на одной странице). Используйте имена классов, если вам нужны повторяющиеся значения.

2. Вы ищете «липкий нижний колонтитул» (всегда внизу экрана) или просто пытаетесь разместить нижний колонтитул в нижней части контейнера?

3. Вам определенно следует устранить проблему, на которую указал Уэсли. Повторяющиеся идентификаторы приводят к непредсказуемому поведению и проблемам с кроссбраузерностью.

Ответ №1:

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

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

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

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

Удачи!

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

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

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

Комментарии:

1. Этот ответ очень полезен и корректен, но на самом деле он не отвечает на вопрос @Varazi…. Нет понижения, поскольку это отличная информация, но на самом деле это не решение, а просто множество проблем.

2. @rockerest: Проблема в том, что, когда я начал предлагать несколько решений, я понял, что все они были взломами и требовали довольно значительной реструктуризации макета и CSS, чтобы избежать еще большего количества взломов в будущем. В CSS происходит много сумасшедших вещей, и я не хотел просто предлагать еще один пластырь, когда операция была уместна.

Ответ №2:

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

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

Ответ №3:

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

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

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

Комментарии:

1. @Gaby 1 к вашему комментарию 🙂 На самом деле нет четкой причины для определения этой высоты.

Ответ №4:

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

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

Ответ №5:

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

http://compass-style.org/reference/compass/layout/sticky_footer/

Комментарии:

1. Я не уверен, что он хочет липкий нижний колонтитул, я полагаю, он просто хочет, чтобы нижний колонтитул находился внизу его контейнера макета.

Ответ №6:

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

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