• CSS 26.06.2009

    Ако искате да имате footer, който да стои най-отдолу на страницата дори когато съдържанието е малко, ето как става това.
    Първо задаваме 100% височина на html, body и нулираме margin и padding на body

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

    Прави се блок, който обагражда основното съдържание на страницата – #main_container

    #main_container{
    margin:0 auto -181px;
    min-height:100%;
    height:auto !important;
    height: 100%;
    }

    Височината я определяме с 3 реда заради ie6.
    Блокът който ще държи съдържанието

    .main_block {
    margin:0 auto;
    padding: 0 0 181px;
    width:961px;
    }

    задава му се padding-bottom:181, колкото е височината на footer, но трявба да се има предвид,
    че ако са зададени padding или margin на footer, padding на .main_block трябва да е
    сумата на височината + padding и margin на footerпосле слагаме

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

    и

    #footer {
    margin:0 auto;
    width:961px;
    background:#000;
    color:#FFF;
    height:181px;
    }

    Това е всичко :)
    ето и целия код:

    html, body{
    height: 100%;
    }
    body{
    margin: 0;
    padding: 0;
    }
    #main_container{
    margin:0 auto -181px;
    min-height:100%;
    height:auto !important;
    height: 100%;
    }
    .main_block {
    margin:0 auto;
    padding:0 0 231px;
    width:961px;
    }
    #footer {
    margin:0 auto;
    width:961px;
    background:#000;
    color:#FFF;
    height:181px;
    }

    ето и демото

    Posted by admin @ 10:02

    1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
    Loading ... Loading ...
  • Leave a Comment

    Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.

Нещо свежо

Анкета

Какъв е вашият стил на 'рязане' (на дизайн)

Виж резултатите

Loading ... Loading ...

Реклама

Последни статии

Партньори

Новините на Казанлък