2012-02-23 1 views
0

Мой нижний колонтитул не доходит до основания. Я поставил свой код в JS скрипке для людей, чтобы посмотреть на:Нижний колонтитул не доходит до конца

http://jsfiddle.net/q2pd5/

Моей проблема лучше просматриваться на фактической странице: http://dev.madhousecreative.co.uk/ или на полном результате экранизации jsfiddle его очевидно.

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

У меня есть много плавающих здесь, но я попытался очистить их там, где это необходимо.

Также попытались липнуть нижний колонтитул, как предложено в некоторых других ответах на вопросы, но это тоже не работает.

Насколько я знаю, это во всех браузерах

ответ

2

Просто добавьте

overflow: hidden 

к #footer в вашем CSS. Это небольшой трюк, который часто пропускается. В основном переполнение: скрытый позволяет вашему div изменять размер по вертикали на основе его содержимого.

+0

Отлично. Благодарю. Это сработало очень хорошо. – RSM

+0

Что на самом деле было проблемой? Вы знаете? – RSM

+0

@ RyanMurphy, Да и нет! когда вы используете панель инструментов firebug или IE, вы не можете видеть div, даже если у него есть контент. Он технически имеет высоту 0px. добавление переполнения: скрытый позволяет ему изменять его содержимое (высота). После того, как он будет изменен, он позволяет отображать страницу правильно, потому что она имеет высоту. Я не могу рассказать вам о реальной механике проблемы. Как я понимаю, все мои divs ясны: оба; overflow: скрытый (если они не плавают). Надеюсь, это поможет немного. –

1

Вы не удалили float s из списков в нижнем колонтитуле. Clear it с overflow: hidden; на колонтитуле, как это:

#footer { 
    overflow: hidden; 
} 
+0

Отлично, что сработало спасибо. Обычно вы не очищаете поплавки с четким: оба; Тхо? – RSM

+0

@ RyanMurphy да, это тоже работает, но иногда вам нужно будет добавить ненужную разметку HTML, чтобы применить 'clear' to. Очистив свойство 'overflow', вы избегаете этого. :) – Jona

0

футер не должным образом очищаются. Попробуйте его с clearfix как так:

#footer:before, #footer:after { 
    content: ""; 
    display: table; 
} 
#footer:after { 
    clear: both; 
} 

#footer { 
    zoom:1; /* ie fix */ 
} 
0

Колонтитулом указало height: 200px;, разделочный фоновое изображение. Нижний колонтитул фактически простирается до нижней части окна, но последний элемент в списке не может быть замечен, потому что это белый текст на белом фоне.

Другими словами, установка overflow: hidden не исправляет ее в одиночку, она просто отбивает остальную часть нижнего колонтитула. Удалите также height: 200px, и он работает.