Прибиваем футер к полу

    Давно хотел это сделать (прибить «подвал» к полу) — как ни крути, а «Copyright 2008» по среди экрана
    выглядит не козырно. Есть статьи по этому поводу, но ни одного дельного совета я так и не нашел.
    Даже парни из LayOut Gala не утруждают себя этим вопросом, хотя занимаются полнейшей мистикой с отрицательными полями, получая при этом «резину» любого вида. Именно они натолкнули меня на мысль использовать отрицательное верхнее поле(margin-top) футера — за это им отдельное спасибо.

    Перейдем к делу. Тем, кто написал в этой жизни хотя бы пару css кодов самостоятельно советую пропустить нижеследующие разъяснения и посмотреть сам код в конце страницы. Кому лень разбираться самому попробую обьяснить на пальцах в чем тут дело:

    В тэг body помещаем box (он же div, он же блок) с минимальной высотой 100%:

    #container { min-height: 100% }

    Для ie6 пишем волшебное заклинание:
    *html #container { height: expression(document.body.clientHeight > 50? "100%" :"50px"); }

    Сразу под «контейнер» запихиваем «подвал» с необходимой нам высотой в пикселах и назначаем ему margin-top, равный высоте подвала, взятой с отрицательным знаком (допустим высота нашего «подвала» 50px):

    #footer { height: 50px; margin-top: -50px; background: #cccccc; }

    Если контента( текста, фоткок и всего такого) больше, чем на один экран, то он залазит на футер (смотрим), поэтому в «контейнер» кладем див (я назвал его антифутер) с высотой, равной высоте футера:

    #antifooter { width: 50px; }
    Вот собственно и все.

    Что хочу добавить:

    — не забываем про DOCTYPE:
    — в начале css необходимо написать следующее: body, html { margin: 0; padding: 0; width: 100%; height: 100%; } (без этого в некотрых браузерах height:100% не работает).

    готовый код:

    <!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<title></title>
    	<meta http-equiv="content-type" content="text/html;charset=windows-1251">
    	<meta http-equiv="imagetoolbar" content="no"> 
    	<style type="text/css">
    	           body, html { margin: 0; padding: 0; width: 100%; height: 100%; }
    	           #container { width: 100%; min-height: 100%;   }	   
    		   #antifooter { width: 100%; height: 50px; }
    		   #footer  {
    		                  width: 100%; height: 50px; 
    		                  margin-top: -50px ; 
    				  background: #cccccc; 
    				 }
    		 *html #container { height: expression(document.body.clientHeight > 100? "100%" :"100px"); }
    	</style> 
    </head>
    <body>
        <div id="container">
    	                   Thi is the Small-Small Content
    	 <div id="antifooter"> </div>
    	</div>
    	<div id="footer"> Text to this section</div>
    </body>
    </html>


    Тестируем здесь

    В ie5 — не проверял, так как мои знакомые по большей части пользуются разработками какой-то компании, занимающейся фруктовым бизнесом, в остальных браузерах все работает отлично при любом количестве контента:

    Opera… .+
    FireFox ....+
    Safari.......+
    IE… .+
    NN ...........+

    Спасибо dmmd за помощь в создании кода.
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 40

      +5
      во-первых, хабракат

      во-вторых, к таким статьям надо делать иллюстрации со схематикой layout, потому что «рендерить» CSS-код в собственном воображении как-то неохота :)
        –12
        Согласен полностью, ссылки с примерами будут, просто сейчас у меня cuteFTP просит регистрации.
        Через 7 часов попробую выложить примеры так чтобы было все понятно.
        Если не секрет, что значит хабракат?
          +2
          Хабракат — это тег специальный, который обрезает статью в установленном месте и вставляет слова типа «Читать далее».
          Тег выглядит так — <habracut />
          Если работали с Wordpress, то хабракат это тоже самое что и <!--more--> в Вордпрессе.
            +1
            Спасибо.
            0
            Попробуйте Filezilla, чтобы не платить за клиент FTP
          +2
          «Смотрим->» это что?
            0
            В этих местах через 7-8 часов появятся иллюстрации
              +4
              Так почему же нельзя было подождать 7-8 часов и опубликовать пост сразу с картинками?
                –14
                Честно говоря не думал, что в час ночи кто-то будет читать мой блог. Вот и решил выложить «альфа» версию.
            –5
            Может я далек конечно от этих дел. Но когда я делаю плавающий макет, то футер ложится вниз просто при добавлении свойства clear: both.
              0
              Имеется ввиду расположение подвала при большом мониторе и малом количестве контента.
                0
                Проблема в том, что когда контента мало футер «вылетает» на середину экрана.
                Запрещение обтекания (clear) этой проблемы не решает, т.к. блоки все равно «прилипают» к верхнему бордеру.
                +1
                Аж три года назад на xhtml.ru обсуждался материал на эту тему. И там в комментах была волшебная ссылка по которой имеется замечательный кроссбраузерный пример решения этой задачи.

                Причём, без использования скриптов в виде expression.
                • UFO just landed and posted this here
                    0
                    Зависаниями кстати тоже. А это, согласитесь — не дело.
                    • UFO just landed and posted this here
                        0
                        О, да. Когда массово пользуешься expression, сложнее сделать работоспособным, чем подвесить. Вот неплохое повествование от человека, который явно глубоко копнул в эту тему.
                  +1
                  Тема «прибивания футера» обсуждалась многократно.
                  Решение раз: designformasters.info/posts/chastyie-voprosyi-o-css/#bottom-fixed-footer
                  Решение два: www.w3school.ru/blog/css/sticky-footer.html

                  И готовый код нужно отформатировать хотя бы построчно. Тот поток сознания, что показан у вас — для биороботов и прочих парсеров, но никак не для людей.
                    0
                    Я думал, что заключив код в тэги всё отформатируется само, а оказалось — нет.
                    Подскажите как отформатировать готовый код?
                      +1
                      Нужно
                      использовать не строковый тег code
                      a 
                      более
                      правильный,
                      block-level
                      тег
                      pre
                      

                      и пользоваться предпросмотром
                    +2
                    >> кладем див (я назвал его антифутер) с высотой, равной высоте футера:
                    >>
                    >> #antifooter { width: 50px; }

                    Если на клетке с зайцем написано «слон» — не верь глазам своим?
                      0
                      Ну а как Вы его еще назовете?
                        0
                        У вас там ошибка — «width» вместо «height». Подозреваю, именно это имелось в виду.
                          0
                          Щас гляну
                          +2
                          Вы пишите: «с высотой», и при этом указываете width
                      • UFO just landed and posted this here
                        • UFO just landed and posted this here
                          • UFO just landed and posted this here
                            • UFO just landed and posted this here
                              • UFO just landed and posted this here
                          0
                          в IE не работает, потому как бред написан:
                          (document.body.clientHeight > 100%? «100%» :«100%»)
                            0
                            Это опечатка.
                            Спасибо.
                              0
                              Вы считаете оправданным вставлять в статью не отлаженный код?
                            0
                            Проставьте, пожалуйста, более релевантныне теги. Блогосфера каким боком к вашей публикации?
                              0
                              Если не секрет, что значит более релевантныне теги?
                                0
                                Теги, описывающие содержимое вашей статьи. Как минимум это CSS, footer. Каким тут боком «блогосфера», я, к сожалению, не понимаю.
                                  0
                                  Наверно те, которые точно соответствуют теме повествования. Тег «Блогосфера» слишком косвенно касается вашего топика (если вообще касается, учитывая, что html/css используется не только в блогах). Думаю значительно точнее было бы поставить теги «css, html, вёрстка».
                                    0
                                    Как можно это исправить?
                                +1
                                Уж и не знаю то ли вы велосипед изобретаете забыв погуглить, то ли выдаёте чужое за своё, но ваше решение в кросбраузерном виде реализовано уже как несколько лет. Причём чтобы его найти достаточно всего лишь набрать в Google «css footer».

                                Забавно видеть давно известные вещи в качестве некого новейшего know-how. И если раньше независимые переоткрытия были простительны, то сейчас, в эпоху открытого доступа к знаниям каждый сам себе «злобный Буратино», когда не сверяет свои открытия с тем, что давно известно.

                                PS: минусов не ставлю — не ошибается лишь тот, кто ничего не делает.
                                  0
                                  Я работаю в небольшой компании по созданию сайтов — 3й месяц. Пару недель назад у нас была дискуссия
                                  по этому поводу: в результате выяснилось что болие менее приличного метода прибивания подвала в этой канторе никто не знает — похоже просто не задавались целью. Я поискал при помощи правда русских запросов — ничего ни нашел, а тут на днях бац — пришла идея с отрицательным маргином.
                                  Неудивительно, что метод давно известен — изобрести велосипед тоже приятно.
                                  Спасибо всем, кто оставил комментарии.

                                Only users with full accounts can post comments. Log in, please.