Футер внизу страницы

Советы, заготовки. Верстка. HTML, CSS, JavaScript.
Ответить
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45

Футер внизу страницы

Сообщение Александр »

Футер внизу страницы

Прибить футер к низу страницы.
Верстка DIV.

Лучший способ

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

<style>html, body {    width:100%;    height:100%;}.wrap {    height:auto !important;    height:100%;    min-height:100%;    position:relative;}.empty {    height:100px; /* равняется высоте футера */}.footer {    height:100px;    margin-top:-100px;    position:relative;}</style> <div class="wrap">    контент    <div class="empty"></div></div><div class="footer">    футер</div>

Прибить футер к низу страницы с помощью JavaScript

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

<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <script src="footer.js" type="text/javascript" ></script><div class="wrap">    контент</div><div class="footer">    футер</div>
footer.js

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

$(document).ready(function(){    run();});window.onresize = run;  function run() {    jQuery('.wrap').css('min-height',(getClientHeight() - parseInt(jQuery('.footer').css('height')))+'px');}; function getClientHeight() {    if (window.opera) {        return (self.innerHeight || ( de && de.clientHeight ) || document.body.clientHeight);    } else {        return document.compatMode=='CSS1Compat'?document.documentElement.clientHeight:document.body.clientHeight;    }}
Ответить