текст переходит в фиксированный нижний колонтитул - PullRequest
Новая
       0

текст переходит в фиксированный нижний колонтитул

0 голосов
/ 21 марта 2011

У меня есть фиксированный нижний колонтитул внизу моей страницы: 

#footer
{
position: fixed;
clear:both;
text-align: right;
color:gray;
font-size:12px;
border-top: 1px solid #999; 
width: 900px;
bottom: 0px;
height: 30px;
}

Но мне не удалось предотвратить попадание текста в нижний колонтитул. Для текстовой области я использую этот CSS: 

#content {
  margin-left: 2.25em;
  margin-top: 8em;
  padding: .5em .5em 30px 0em;
}

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

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

У вас есть идея, как я могу предотвратить попадание текста в нижний колонтитул?

Спасибо!

Ответы [ 4 ]

1 голос
/ 21 марта 2011

Поскольку позиция нижнего колонтитула равна fixed, при позиционировании он игнорирует основное содержимое. Таким образом, основной контент может перекрываться. Попробуйте поместить непрозрачный фон в нижний колонтитул и поместить его перед основным содержимым (z-index) 

#footer { background-color: white; z-index: 10 }
#content {z-index: 0}

Z-индекс показывает, какой блок находится над другим (например, слои фотошопа)

0 голосов
/ 21 марта 2011

add #content style - z-index, который меньше z-index нижних колонтитулов добавить стиль #content - float: left и display: inline-block

0 голосов
/ 21 марта 2011 
#footer
{
position: fixed;
clear:both;
text-align: right;
color:gray;
font-size:12px;
border-top: 1px solid #999; 
width: 900px;
bottom: 0px;
height: 30px;
}

#content {
  margin-left: 2.25em;
  margin-top: 8em;
  padding: .5em .5em 30px 0em;
}

Я бы, вероятно, не использовал отступы для содержимого.Если вы ЗНАЕТЕ высоту стопы (например, они делают это в Facebook, где фиксированный нижний колонтитул всегда имеет одинаковую высоту), тогда я бы дал #content поле-основание с этой высотой + например, 10px.

И тогда - как говорили другие, я бы использовал z-index (как в примере ниже):

# footer {position: fixed;ясно: то и другое;выравнивание текста: справа;Цвет: серый;Размер шрифта: 12px;border-top: 1px solid # 999;ширина: 900 пикселей;низ: 0px;высота: 30 пикселей;z-индекс: 15;} 

#content {
  margin-left: 2.25em;
  margin-top: 8em;
  padding: .5em .5em 0 0;
  margin: 0 0 30px 0;
  z-index: 10;
}

Дайте мне знать, если это сработало для вас!

0 голосов
/ 21 марта 2011

у вашего контента уже есть отступ 30px, все в порядке. Чтобы исправить нижний колонтитул и позволить тексту идти за нижним колонтитулом, просто укажите z-index нижнего колонтитула. попробуйте добавить: z-index: 15;

...