DIV-ная верстка, footer прижат

    Много способов прижатия футера к нижней кромке окна уже изобретено и описано, стОит только погуглить. Но хочется поделиться тем, к чему пришёл самостоятельно (пришлось изобретать, т.к. не было инета под рукой :))…

    Сначала пошёл ошибочным путём: основной DIV с контентом — 100% по высоте, а хидер и футер спозиционированы абсолютно. Выглядит нормально во всех браузерах, но в ИЕ6 вылезал косяк — при динамической смене контента (через javascript) футер оставался на своем месте, т.е. не перемещался вслед за кромкой окна. Поэтому сделал так: DIV с основным контентом, DIV-футер с отрицательным margin-top, DIV-хидер с абсолютным позиционированием. Нарисовался очевидный плюс данного способа: основной контент страницы в HTML-коде максимально приближен к началу документа.

    Вот несколько комментариев по коду:
    1. не знаю, как поведёт себя всё это при смене doctype (не было времени проверить)
    2. DIV в ФФ и Опере будет тянуться на 100% по высоте, при условии, что его родительский элемент имеет высоту 100% (для этого в style есть строчка html, body {height: 100%}), и задается высота для DIV именно через min-height.
    3. В силу того, что ИЕ6 не видит !important, удалось обойтись без хаков :) Спасибо set.
    4. Для отступов внутри этих трёх основных DIV-ов лучше не использовать padding, применённый к самим DIV-ам, а вложить в каждый из них по дополнительному DIV-у, и к нему уже применить все необходимые отступы (как я и сделал).
    5. В моем примере ширина задана жестко (для нерезинового отцентрованного сайта). Резиновость тоже очень легко реализовать, достаточно убрать width у DIV-ов с классом container.
    6. Потестировал в Opera 9.27, Firefox 3, IE 6, IE 7. Везде работает :)

    Посмотреть шаблон странички можно тут: e1.nnov.ru/template.html
    HTML-код странички:
    <!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
    New Document
    />




    Здесь будет контент
    Подвал
    Шапка



    UPD: Внёс некоторое изменение в css: теперь код без css-хаков.
    UPD2: slil.ru/25963498 — скриншоты отображения тестовой страницы в различных браузерах (хулиганит только Опера 9.50+, остальные браузеры отображают как надо)
    Поделиться публикацией

    Похожие публикации

    Комментарии 26
      0
      Уведите, пожалуйста, код под хабракат. Спасибо
        0
        Сделал, спасибо за замечание :)
        0
        opera 9.51 - не работает...
          +1
          и, если я не ошибаюсь, сафари тоже кушает хак html* , т.е. с таким количеством текста, как у вас, всё будет нормально, но при переполнении блока - не знаю даже, что получится в сафари... для ие6 пользую подчерк, для ие7 - *+html (ие8, правда, его тоже кушает), это если хак один-два, если много - лучше в отдельный стиль...
            0
            Изменил хак, см. UPD
              +1
              min-height: 100%; height: auto; _height: 100%;
              в данном случае можно вообще без хака обойтись:
              height: auto !important; height: 100%; min-height: 100%;
                0
                ИЕ6 не воспринимает !important?
                (вношу очередное изменение, спасибо!)
                  0
                  ну, как вам сказать? :) я не гуру в ие6, но таким способом всегда указываю высоту body , когда мне нужна высота боди не менее 100% во всех браузерах... ослик доволен, остальные браузеры - тоже :)
                    0
                    воспринимает.
                    только нужно писать через пробел:
                    height: 100px ! important;
                      0
                      Я запутался :( Везде, где читал про !important, эта конструкция написана без пробела.
                      Опять же, непонятна логика кода height: auto !important; height: 100%; min-height: 100%
                      Если !important понимает любой браузер, то значение height: 100% ни одним браузером (в т.ч. и ИЕ6) не воспримется?
                        0
                        БЕЗ пробела IE6 не поймет.

                        тут как раз все понятно:
                        для IE6 - height: 100%;
                        для остальных: height: auto; min-height: 100%;

                        т.е. пользователь set не совсем правильно написал про "без хака".
              0
              Странная вещь - при ресайзе окна в этой опере футер встает на свое место, а после F5 опять всё криво... Глюк браузера?
                0
                Уточню - при горизонтальном ресайзе окна всё встает на свои места, а при вертикальном - нет...
                  0
                  скорее всего... я хоть и поклонник оперы, но должен признать, что 9.5, 9.51 получились глюкавыми... яваскрипт работает ещё кривее в некоторых местах + даже родные плагины кривовато работают... но факт остаётся фактом - не я один обновился до этой версии...
                    0
                    Надеюсь, очень скоро это всё пофиксят, и все недавно обновившиеся вновь будут получать удовольствие от любимого браузера (лично я всё-таки изменил ему:( пару лет сидел на опере, но всё-таки перешёл на ФФ3).
                      0
                      тоже очень на это надеюсь, привык я к опере за много лет...
                0
                :) смотрю, не я один скриншоты на браузершотсе запросил ? ;) http://browsershots.org/http://e1.nnov.r…
                  0
                  Да, после установки оперы 9.51 я решил посмотреть и другие браузеры :)
                  0
                  Кто-нибудь знает, почему тэг доктайпа в моем примере не отображается? :(
                    +1
                    у вас доктайп написан маленькими буквами, а надо большими
                    http://www.w3.org/TR/xhtml11/xhtml11_dtd…
                      0
                      Спасибо за подсказочку, но в данном случае, видимо, проблема не в этом. Может быть, Хабр открывающую угловую скобку и следующий за ним восклицательный знак воспринимает как начало комментария, и поэтому не отображает?
                        0
                        ах вы про свой пост. не знаю, попробуйте заменить угловую скобку на html-сущность. а я говорил про пример на вашем сайте, у вас получился невалидный документ, да и ие наверное работает в quirks mode
                    +1
                    Да Вы, уважаемый, плохо гуглили. Работает везде, начиная с 6го Эксплорера. Если мне не изменяет память, то и в 5.5 тоже работает

                    CSS:

                    html, body {
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    }

                    #all { /* all content must be wrap in <div id="all"></div> */
                    position: relative;
                    height: 100%;
                    min-height: 100%;
                    }

                    html>body #all {
                    height: auto;
                    }

                    #footer {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    }

                    #footer, #empty {
                    height: 50px;
                    }


                    HTML:

                    <body>
                    <div id="all">

                    <div class="content">
                    Some content
                    </div>
                    <div id="empty"></div>
                    <div id="footer">
                    This is content of footer path
                    </div>
                    </div>
                    </body>

                      0
                      Я, уважаемый, вообще не гуглил :) О чём и написал в скобочках во втором предложении своего поста.
                      Кстати, предложенный Вами способ тоже нехорошо ведёт себя в Opera 9.51
                      А ещё в этом нагугленном способе наблюдается CSS-хак, а вот в моем совместными усилиями с посмотреть профиль set его уже нет :Р
                        +1
                        ну, хаков у нас одинаково: адинадин. Ибо !important - тоже хак. Я имею ввиду то, что между ! и словом нужно пробел ставить, тогда его все браузеры воспринимают.
                        А у вашего варианта преимущество в отсутствии дополнительного дива "all" - это семантически правильно.
                        Хотя он меня не раз спасал ;)
                      +1
                      Мне данный пример, помог сделать %post_title% на уже готовом сложном шаблоне. Достаточно просто и быстро. Работает во всех современных браузерах, что и требовалось т.к. сайт фактически функциональный прототип.
                      Однозначно "+" и «Спасибо!»

                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                      Самое читаемое