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

Ответить
Аватара пользователя
Distructor
Администратор
Сообщения: 1607
Зарегистрирован: 28.12.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> 
IE6
IE6
FF3
FF3
Источник: http://www.cssstickyfooter.com/

Ответить