Нижний колонтитул отображается в середине страницы только в IE

Question

Я использую эту информацию о стиле, чтобы мой нижний колонтитул прилипал к нижней части моих веб-страниц, и он отлично работает в FF, Chrome и Opera. Только в IE нижний колонтитул отображается в середине страницы, а не внизу.

body { margin: 0; padding: 0; height: 100%; font-family: Georgia; }

#parent 
{
    min-height: 100%;
    position: relative;
}

#header { position: relative; left:0px; top:0px; width: 100%; height:45px; background-color: black; }

#content { padding-bottom: 150px; position: relative; }

#footer { position: absolute; left: 0px; width:100%; bottom: 0; height:80px; background-color: black; }

Структура HTML выглядит следующим образом:

• тег HTML
  • родитель
    • заголовок
    • содержание
    • сноска

Обновление

Я подумал, если я добавлю этот условный селектор для IE, он будет работать в обоих браузерах.

#parent { height: 100%; /* min-height: 100%; */ }

Теперь, может, кто-нибудь скажет мне, допустимо ли добавлять условный комментарий CSS в файл .css, который включается как внешний в файл HTML? Я думаю, нет. Как мне использовать этот условный комментарий без использования дополнительного CSS-файла только для IE?

Answer 1

Это должно помочь:

html {
height: 100%;
}

Взгляните на исходный код и попробуйте его в любом браузере: Нижний колонтитул внизу страницы .Он работает на IE7, IE8 и IE9, только на IE6 и ниже не будет из-за свойства min-height.Я думаю, что установка правильного DOCTYPE решит вашу проблему.Надеюсь, что это помогло.

Answer 2

У меня была такая же проблема несколько недель назад, и я нашел довольно хорошее руководство по этому вопросу. Нажмите здесь! Основная идея этого решения - создать упаковку, которая впитывает большую часть страницы, оставляя достаточно места для размещения нижнего колонтитула в нижней части страницы.Этот трюк определенно работает в IE.