Верстка сайта с прижатый к низу страницы футером

Аватара пользователя
Distructor
Администратор
Сообщения: 1599
Зарегистрирован: 28 дек 2009
Данный способ можно считать наиболее кроссбраузерным, т.к. он правильно отображается во всех основных браузерах - IE, FireFox, Opera, Chrome (полный список можно посмотреть в http://www.cssstickyfooter.com/browser-list.html )

Код: Выделить всё

<html>
  <head>
    <title>Пример верстки</title>
    <style type="text/css">
        /*  
        Sticky Footer Solution by Steve Hatcher 
        http://stever.ca
        http://www.cssstickyfooter.com
        */

        * {
            margin:0;
            padding:0;
        } 
        
/* must declare 0 margins on everything, also for main layout components use padding, not 
        vertical margins (top and bottom) to add spacing, else those margins get added to total height 
        and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

        html, body {
            height: 100%;
        }
        #wrap {
            min-height: 100%;
        }
        #main {
            overflow:auto;
            padding-bottom: 150px;  /* must be same height as the footer */
        }
        #footer {
            position: relative;
            margin-top: -150px; /* negative value of footer height */
            height: 150px;
            clear:both;
        } 
        
/*Opera Fix*/
        body:before {/* thanks to Maleika (Kohoutec)*/
            content:"";
            height:100%;
            float:left;
            width:0;
            margin-top:-32767px;/* thank you Erik J - negate effect of float*/
        }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="main">

      </div>
    </div>

    <div id="footer">

    </div>

  </body>
</
html> 


ie-6-win-2000.png
IE6
firefox-3-win-xp.png
FF3


Источник: http://www.cssstickyfooter.com/

Вернуться в «Уроки и статьи по верстке»