ФорумРазработкаКлиентская сторонаВерстка и оформление → Привязка подвала к низу страницы

Привязка подвала к низу страницы

  • pasha

    Сообщения: 1048 Репутация: N Группа: Адекваты

    Spritz 25 августа 2008 г. 9:49

    Не всасал как сделать… да и с версткой плохо :(
  • md5

    Сообщения: 11951 Репутация: N Группа: в ухо

    Spritz 25 августа 2008 г. 9:49, спустя 35 секунд

    надо ещё пробывать всасывать
    все умрут, а я изумруд
  • AlexB

    Сообщения: 4288 Репутация: N Группа: в ухо

    Spritz 25 августа 2008 г. 10:09, спустя 19 минут 8 секунд

    На самом деле это сложнейшая задача научной магии.

    Если кто сумеет это сделать с загловком
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    то ваще респект и уважуха. Я лично не смог.

    Как делать в стандарт-моде в инете примеры 100 пудово есть, так что спрашивай у яндекса.

    ЗЫ. Все вышесказанное относится, разумеется, к блокам, а не таблицам.



  • Timur

    Сообщения: 1068 Репутация: N Группа: Джедаи

    Spritz 26 августа 2008 г. 4:25, спустя 18 часов 16 минут 5 секунд

    способов несколько, я обычно использую отрицательный margin.

    Этот пример (как видно, вообще без !DOCTYPE) работает везде, начиная с IE5.5 (более ранние не проверял)
    <html>
    <head>
    <title>Sample page</title>
    <style type="text/css">
    html,body{
    height:100%;
    margin:0;
    overflow:auto;
    }
    #content{
    color:#333;
    background:#ccc;
    min-height:100%;
    }
    *html #content{ /* Вместо этого хака лучше использовать условные комментарии */
    height:100%;
    }
    #content-clear{ /* Данный блок нужен, чтобы подвал не налезал на контент */
    clear:both;
    height:100px;
    }
    #footer{
    color:#ccc;
    background:#333;
    margin-top:-100px; /* тот самый отрицательный margin */
    height:100px;
    }
    </style>
    </head>
    <body>

    <div id="content">
    CONTENT
    <div id="content-clear"></div>
    </div>

    <div id="footer">FOOTER</div>

    </body>
    </html>


    Недостаток
    - фиксированная высота подвала;
    - нарушение семантики служебным блоком #content-clear.
  • AlexB

    Сообщения: 4288 Репутация: N Группа: в ухо

    Spritz 26 августа 2008 г. 4:40, спустя 15 минут 8 секунд

    О, вроде работает. Тимур, как всегда, на высоте. Ну как тут без плюсика обойтись … )))
  • Z-MODe

    Сообщения: ? Репутация: N Группа: Кто попало

    Spritz 2 сентября 2008 г. 17:47, спустя 7 дней 13 часов 7 минут

    Вместо этого хака лучше использовать условные комментарии


    Что такое условные комментарии и почему лучше?
  • Timur

    Сообщения: 1068 Репутация: N Группа: Джедаи

    Spritz 3 сентября 2008 г. 1:39, спустя 7 часов 51 минуту 50 секунд

    Лучше, потому позволяют сохранить валидность CSS-кода

    Про условные комментарии:

    • http://ru.wikipedia.org/wiki/Условный_комментарий

    • http://blog.sribna.com/uslovnyie-kommentarii-v-css.htm

    • http://blog.sribna.com/uslovnyie-kommentarii-v-css.htm


    Или другой вариант: http://dimox.name/css_hacks_vs_conditional_comments/
  • pasha

    Сообщения: 1048 Репутация: N Группа: Адекваты

    Spritz 5 сентября 2008 г. 16:04, спустя 2 дня 14 часов 25 минут

    Вообщем привязал шапку… хочется чтобы страница не прокручивалась… как исправить?

    <html>
    <head>
    <title>Sample page</title>
    <style type=&quot;text/css&quot;>
    html,body{
    height:100%;
    width:auto;
    margin:0;
    overflow:auto;
    }

    #header{

    border-bottom:#6A0000 groove;
    vertical-align:middle;
    padding-left: 5px;

    }

    .s1{
    font-size: 25px;
    }

    #content{
    color:#333;
    background:#ccc;
    min-height:100%;
    }
    *html #content{ /* Вместо этого хака лучше использовать условные комментарии */
    height:100%;
    }
    #content-clear{ /* Данный блок нужен, чтобы подвал не налезал на контент */
    clear:both;
    height:1px;
    width: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    }
    #footer{
    color:#CC0000;
    background: #FFFFFF;
    border-top:#6A0000 groove;
    margin-top:-100px; /* тот самый отрицательный margin */
    height:100px;

    }
    </style>
    </head>
    <body>
    <div id=&quot;header&quot;><span class=&quot;s1&quot;>шапка</span></div>
    <div id=&quot;content&quot;>
    <div id=&quot;content-clear&quot;>контент</div>
    </div>

    <div id=&quot;footer&quot;>подвал</div>

    </body>
    </html>


  • Timur

    Сообщения: 1068 Репутация: N Группа: Джедаи

    Spritz 6 сентября 2008 г. 5:06, спустя 13 часов 2 минуты 2 секунды

    я наверное хреново объяснил :)

    &lt;html>
    &lt;head>
    &lt;title>Sample page&lt;/title>
    &lt;style type=&quot;text/css&quot;>
    html,body{
    height:100%;
    margin:0;
    padding:0;
    }

    #page{
    background:#eee;
    min-height:100%; /* на весь экран */
    }
    *html #page{
    height:100%; /* для ie6 и ниже */
    }

    #header{
    background:#ccc;
    }

    #page-clear{
    clear:both;
    height:100px; /* >= высоте подвала */
    }

    #footer{
    background:#999;
    height:100px; /* высота подвала */
    margin-top:-100px; /* = высоте подвала */
    }
    &lt;/style>
    &lt;/head>
    &lt;body>

    &lt;div id=&quot;page&quot;>&lt;!– в этот блок помещаяется _всё_, кроме подвала
    и растягивается на 100% –>

    &lt;div id=&quot;header&quot;>шапка&lt;/div>

    &lt;div id=&quot;content&quot;>контент&lt;/div>

    &lt;div>ещё че-нибудь :)&lt;/div>

    &lt;div id=&quot;page-clear&quot;>
    &lt;!– здесь пусто.
    Как ты помнишь, у нас #page растянут на весь экран.
    Этот блок нужен, что бы футер, который мы поднимает за счет отрицательного
    margin&#39;а не налезал на содержимое страницы. Он как бы &quot;компенсирует&quot; этот
    сдвиг.
    –>
    &lt;/div>

    &lt;/div>

    &lt;div id=&quot;footer&quot;>подвал&lt;/div>

    &lt;/body>
    &lt;/html>


    при этом помни, что в соответствии со стандартом CSS значения margin, padding и border не входят в общие width и height. Т.е. если ты сделаешь так:

    #page{
    height
    width:100%;
    padding:10px;
    margin:10px;
    border:10px solid #fff;
    }

    у тебя получится прокрутка в 60px ((10px+10px+10px)*2 стороны) сверху и справа
  • bnret

    Сообщения: ? Репутация: N Группа: Кто попало

    Spritz 7 декабря 2009 г. 14:44, спустя 457 дней 10 часов 37 минут

    О, вроде работает. Тимур, как всегда, на высоте. Ну как тут без плюсика обойтись … )))
  • Troy

    Сообщения: 2533 Репутация: N Группа: Джедаи

    Spritz 7 декабря 2009 г. 13:45, спустя 23 часа 57 секунд

    bnret, плагиат )
  • phpdude

    Сообщения: 26617 Репутация: N Группа: в ухо

    Spritz 7 декабря 2009 г. 21:30, спустя 7 часов 45 минут 11 секунд


    О, вроде работает. Тимур, как всегда, на высоте. Ну как тут без плюсика обойтись … )))
    обойдешься, твой первый плюсик ты сможешь поставить через 49 сообщений)
    Сапожник без сапог

Пожалуйста, авторизуйтесь, чтобы написать комментарий!