впервые задаю свой вопрос здесь:)
Я работаю над веб-сайтом и попытался расширить его по вертикали до нижней части окна клиента, используя обычный прием:
html, body { height: 100%; }
.container { min-height: 100%; }
Затем я хотел добавить несколько заголовков над основным контентом и липкий нижний колонтитул внизу.Я завернул их в свои собственные контейнеры и вытащил верхний колонтитул так:
.top { position: relative; z-index: 1; height: 168px; }
.end { height: 58px; }
Зная высоту верхнего колонтитула и липкого нижнего колонтитула, я затем решил настроить общую высоту страницы.такой, что он будет точно заполнять окно клиента (без полос прокрутки), если содержимое не будет слишком длинным.Я сделал это с отрицательными полями:
.container { overflow: hidden; min-height: 100%; margin-top: -164px; margin-bottom: -58px; }
.container-in { margin-top: 164px; margin-bottom: 58px; }
Второй контейнер находится внутри первого, и именно туда я помещаю фактическое содержимое каждой страницы.
Итак, это отлично работает на Firefox 4/5 - Абсолютно ничего не выключено, это так, как задумано.Хром тоже вроде ок.Однако в IE8 он игнорирует отрицательное поле для .container (я проверял с помощью инструментов разработчика).Контейнер начинается после .top, и в результате между .top и .container-in возникает разрыв в 164 пикселя из-за поля .container-in.
И самое забавное - если я переключусьРежим совместимости IE8 и IE7, эта проблема больше не возникает!Отрицательные поля ведут себя очень хорошо в режиме IE7, но, конечно, куча других вещей ломается, поэтому указание IE использовать режим совместимости не вариант.
Любые идеи о том, как обойти эту проблему / использоватьдругое решение для получения одинакового эффекта во всех браузерах (IE7 не требуется)?Я делаю что-то не так?
РЕДАКТИРОВАТЬ: После нескольких забав и игр я обнаружил, что, заменяя отрицательные поля на отрицательные верхние: координаты (и устанавливая все контейнеры как относительные), он работает отличнов IE8, но теперь он оставляет разрыв в 222 пикселя ниже HTML-контейнера в Firefox (согласно Firebug).В замешательстве!
EDIT2: Я думаю, я знаю, что здесь не так, технически говоря.Internet Explorer 8 считает, что отрицательное поле является «переполнением», а поскольку переполнение: скрыто, оно убирает поле.Если я удаляю переполнение: скрытый, он больше не имеет такого поведения, но нарушает остальную часть дизайна.У кого-нибудь еще есть идеи?