Проблемы с высотой jQuery / CSS в IE / Chrome

Question

Я вернулся с большим количеством проблем на моем анимированном всплеске / сайте jQuery.

Вы можете увидеть всплеск, который работает в большинстве браузеров на voidsync.com / test . Проблемы, с которыми я сталкиваюсь в IE, заключаются в том, что html, body или #CONTAINER не адаптируются к более длинному контенту, такому как на страницах «Службы» или «О программе» - вы увидите, что нижний колонтитул неправильно перемещается вниз.

Обновляя браузер после загрузки или завершения заставки, высота страниц корректируется в соответствии с содержимым. Также это работает в IE8 с отключенным JS, так что я знаю, что проблема там. (кроме режима совместимости IE7 или IE8, где нижний колонтитул не перемещается вниз, точка).

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

Бонусный вопрос

Страница хостинга имеет аналогичные проблемы в Chrome, где высота содержимого не изменяется должным образом на этой странице или нижний колонтитул перекрывается, что может быть связано со стилем, используемым в элементах table .

Заранее спасибо!

Answer 1

Значит, вы делаете одну из этих 100% высоты, верно?

Из моего опыта это работает только со следующими

html,body {height:100%;}
#wrapper {position: relative;min-height: 100%;}

В вашем css вы используете #CONTAINER для поддержания 100% высоты, но сейчас в IE это всегда будет 100% высоты области просмотра, а не содержимого.

Что вы можете сделать, это добавить #wrapper вокруг всего вашего контента, сразу после body, чтобы помочь вам сохранить этот 100% -й рост и соответственно расположить нижний колонтитул, возможно, с position:absolute; bottom: 0;

Answer 2

попробуйте добавить <div class="clear"></div> прямо перед нижним колонтитулом

со стилями:

.clear {height:1px; clear:both;}