Порой, дизайн сайта требует, чтобы даже если содержимого на странице совсем мало, футер (подвал) всегда находился внизу экрана. Раньше для этого прибегали к использованию таблиц, но это не наши методы, верно? Мы верстаем DIV-ами и, соответственно, футер – это DIV.

Я расскажу, как заставить его быть всегда внизу, не наплывать на контент и некоторые нюансы.

Итак, нам нужно подготовить «тело» документа. Первый контейнер, в который будет укладываться всё, назовем «metabox». К сожалению, операции производимые с ним не подходят для элемента body, поэтому нужно использовать «корневой» блок. Вкладываем в него контейнер, содержащий весь контент – «box». Ниже – футер («footer»). Поскольку нам прийдется задавать ему 100% ширину и из-за этого внутренние отступы сделать не удастся (т.к. ширина складывается из параметров width+margin+padding, и если к width:100% прибавить padding – блок вылезет за пределы экрана), вкладываем в него еще блок – «footer_content».

В итоге это будет выглядеть так:

<body>

<div id="metabox">

    <div id="box">
        Содержимое
    </div>
    
    <div id="footer">
        <div id="footer_content">
            Hi, I'm footer!
        </div>
    </div>

</div>

</body>

Теперь приступаем к CSS. Первое:

html {
    height:100%;
    }

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

Высота 100% для этих элементов обеспечивает возможность брать относительную высоту от экрана всех дочерних элементов.

#metabox {
    min-height:100%;
    position:relative;
}

Минимальная высота 100% для основного контейнера обеспечит возможность удерживать футер внизу при пустом экране, а position:relative даст возможность держать футер относительно родителя, а не экрана.

IE6 не понимает атрибут min-height:100%, но в нем атрибут height работает как дожен работать min-height, поэтому для него мы подключим отдельный CSS-файл через условный комментарий.

#box {
padding:20px 20px 80px 20px; 
}

Это отступы для содержимого сайта. Нижний отступ является суммой поля и высоты футера (в данном случае, поле 20px, футер – 60px). За счет последнего – футер не налазит на содержимое сайта.

Да, с этим методом прийдется фиксировать высоту футера, но в 99,99% случаев его высота зафиксирована, поэтому вряд ли это может вызывать нарекания.

#footer {
height:60px;
width:100%;
position:absolute;
bottom:0;
left:0;
border-top:1px solid #777;
background:#CCC;
}

Это самое интересное. Футер позиционируется абсолютно, но т.к. его родитель («metabox») обладает свойством position:relative, футер будет считать свою позицию относительно него, а не экрана, что позволит держать его под контентом, если длинна страницы больше высоты экрана.
left:0 нужен для Opera, т.к. в некоторые версиях ей не хватает одного только bottom:0 и она не опускает блок вниз.

Важно, что весь код должен быть в отдельном CSS-файле, а не в теле страницы, т.к. в противном случае Opera при загрузке не опускает блок вниз, а делает это только после обновления страницы.

border-top:1px solid #777 и background:#CCC – для внешнего вида.

#footer_content {
margin:20px; 
}

Ну и последней записью делаем отступы в футере.

Вот, собственно, и всё.

Главный нюанс, а возможно и недостаток этого метода в том, что если вам впоследствии понадобится элемент, позиционированный абсолютно относительно экрана, вам прийдется вынести его за пределы блока «metabox» или использовать position:fixed, но он не работает в IE6 (хотя, надеюсь, вас это не волнует).

Вот, в общем-то и всё. Можете скачать примеры по ссылке ниже.

Ссылки: